I know there are similar topics but none of them tend to solve the issue. I have the following layout where the content has min/max widths and if it reaches the minimum width it should become a horizontally scrollable container. Everything works fine except for the background color (same thing with borders) issue – as soon as I start scrolling, the background cuts off.
I can fix it by making the container an inline-block but that introduces other issues so I wouldn’t want that. Is there any other sane way to fix it?
.container {
max-width: 1200px;
min-width: 700px;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
}
.td {
width: 300px;
}
.table {
width: 100%;
background: wheat;
}
.header {
width: 100%;
display: flex;
justify-content: space-between;
background-color: grey;
}
.header-content {
display: flex;
gap: 10px;
}<div class="page-container">
<header class="header">
<div class="header-content">
<p>Logo</p>
<p>Item 1</p>
<p>Item 2</p>
</div>
<input type="text" placeholder="search">
</header>
<div class="container">
<div class="wrapper">
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<td class="td">
Column 1
</td>
<td class="td">
Column 2
</td>
<td class="td">
Column 3
</td>
<td class="td">
Column 4
</td>
<td class="td">
Column 5
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="td td-s">Data 1</td>
<td class="td">Data 2</td>
<td class="td">Data 3</td>
<td class="td">Data 4</td>
<td class="td">Data 5</td>
</tr>
<tr>
<td class="td td-s">Data 1</td>
<td class="td">Data 2</td>
<td class="td">Data 3</td>
<td class="td">Data 4</td>
<td class="td">Data 5</td>
</tr>
<tr>
<td class="td td-s">Data 1</td>
<td class="td">Data 2</td>
<td class="td">Data 3</td>
<td class="td">Data 4</td>
<td class="td">Data 5</td>
</tr>
<tr>
<td class="td td-s">Data 1</td>
<td class="td">Data 2</td>
<td class="td">Data 3</td>
<td class="td">Data 4</td>
<td class="td">Data 5</td>
</tr>
<tr>
<td class="td td-s">Data 1</td>
<td class="td">Data 2</td>
<td class="td">Data 3</td>
<td class="td">Data 4</td>
<td class="td">Data 5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>