html - 如何修复 flexbox 偏移项目
问题描述
我正在尝试制作一个页面布局,其中侧面导航保持相同大小,并且在页面调整大小时调整主要内容的大小。一切正常,直到我将大小调整为低于表格元素大小的长度,其中表格被移出视图。
奇怪的是表格仍在调整大小,但似乎被侧导航的宽度所抵消。
我对 flexbox 比较陌生,所以如果修复非常明显,我很抱歉
如果这更容易,这里是 jsfiddle:https ://jsfiddle.net/gunnarhawk/rwjbhe12/1/
* {
padding: 0;
margin: 0;
outline: none;
box-sizing: border-box;
}
.left-container {
flex-basis: 250px;
border-right: 1px solid grey;
padding: 25px;
overflow: auto;
flex-shrink: 0;
}
.section-title {
color: grey;
margin-bottom: 15px;
}
.section-content {
white-space: nowrap;
}
.section-content a {
text-decoration: none;
color: #333;
font-weight: 400;
padding: 10px;
font-size: 14px;
border-radius: 6px;
transition: all .3s;
}
.section-content a:hover {
background-color: grey;
color: white;
}
.section-content svg {
width: 16px;
height: 16px;
margin-right: 8px;
}
.right-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 250px;
}
.main-content {
padding: 20px;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="d-flex">
<div class="left-container">
<!--LEFT-->
<div class="left-menu-section">
<div class="section-title">Apps</div>
<div class="section-content d-flex flex-column">
<a href="#" class="d-flex align-items-center">
link
</a>
<a href="#" class="d-flex align-items-center">
link
</a>
</div>
</div>
</div>
<div class="right-container w-100 d-flex">
<!--RIGHT-->
<div class="container-fluid body-content">
<div class="d-flex flex-column main-content justify-content-center">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
<th class="hoverable-th">header</th>
</tr>
</thead>
<tbody>
<tr>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
</tr>
<tr>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
</tr>
<tr>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
</tr>
<tr>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
<td>test row</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>