如何在使用flex css进行结构时滚动溢出的表内容

Question

这里我在父main-wrapper中使用display-flexcss设置内容，但我想在滚动中溢出表的内容。

这可以使用float:leftcss解决，但我不想使用float:left设置结构。

所以只需要滚动右边的内容，而不是整个页面滚动。

* {
margin: 0px;
padding: 0px;
}
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
th,td {
padding: 5px 10px;
}
.main-wrapper {
display: flex;
}
.sidebar {
width: 300px;
height: 175px;
display: block;
min-width: 300px;
background-color: #eeeeee;
margin-right: 15px;
}
.table-wrapper {
overflow: auto;
}

<div class="main-wrapper">
<div class="sidebar">
</div>
<div class="main-content">
<div class="table-wrapper">
<table>
<tr>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
</table>
</div>
</div>
</div>

Answer 1

你能检查一下下面的代码吗？希望对你有用。您需要为.main-content指定宽度，为.table-wrapper指定最大宽度。

请参阅此链接：https://jsfiddle.net/yudizsolutions/9jbqudo1/1/

* {
margin: 0px;
padding: 0px;
}
table,
td,
th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
}
.main-wrapper {
display: flex;
}
.sidebar {
width: 300px;
height: 175px;
display: block;
min-width: 300px;
background-color: #eeeeee;
margin-right: 15px;
}
.table-wrapper {
overflow: auto;
max-width: 100%;
}
.main-content {
width: calc(100% - 300px);
}

<div class="main-wrapper">
<div class="sidebar">
</div>
<div class="main-content">
<div class="table-wrapper">
<table>
<tr>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
</table>
</div>
</div>
</div>