我有这样的布局:
HTML:
<html>
<head>
</head>
<body>
<div class="container">
<div class="left-container">
SIDEBAR
</div>
<div class="right-container">
<div class="header">
<div class="header-item">
HEADER ITEM 1
</div>
<div class="header-item">
HEADER ITEM 2
</div>
</div>
<div class="dashboard">
<div class="nav">
SOME INNER NAVIGATION
</div>
<div class="table-container">
TABLE CONTAINER
<div class="table">
TABLE
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
margin: auto;
max-width: 1300px;
padding: 15px;
background: lightpink;
}
.left-container {
width: 300px;
background: lavender;
margin-right: 50px;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
}
.header {
display: flex;
background: lightblue;
width: 100%;
}
.header-item {
flex: 1 1 auto;
}
.dashboard {
display: flex;
flex-direction: column;
margin-top: 50px;
max-width: 100%;
}
.nav {
background: lightgrey;
}
.table-container {
margin-top: 30px;
background: lavenderblush;
padding: 5px;
width: 100%;
width: 900px;
overflow-x: scroll;
}
.table {
background: lightsalmon;
width: 1500px;
height: 100px;
}
也在 codepen 上.
table-container 中的表格更宽，所以我想要 overflow-x: scroll。问题是，现在 table-container 类具有用像素指定的宽度，width: 900px。
这很好用，但我希望它能扩展到类 dashboard 的 div 的全部可用宽度。但是，如果我将 width: 100% 添加到 table-container，它会破坏布局并延伸到带有 dashboard 类的 div 之外其他兄弟 div。
看起来修复应该很简单，但到目前为止我还没有成功。
最佳答案
您在 table-container 上使用 width:100% 的想法是正确的。但也在 right-container 上使用 overflow: hidden(或 overflow-x)，这样布局就不会被修改。
希望我能正确理解您的需求。请检查下面的代码段。
.container {
display: flex;
margin: auto;
max-width: 1300px;
padding: 15px;
background: lightpink;
}
.left-container {
width: 300px;
background: lavender;
margin-right: 50px;
}
.right-container {
display: flex;
flex-direction: column;
width: 100%;
overflow:hidden;
}
.header {
display: flex;
background: lightblue;
width: 100%;
}
.header-item {
flex: 1 1 auto;
}
.dashboard {
display: flex;
flex-direction: column;
margin-top: 50px;
max-width: 100%;
}
.nav {
background: lightgrey;
}
.table-container {
margin-top: 30px;
background: lavenderblush;
padding: 5px;
width: 100%;
width: 100%;
overflow-x: scroll;
}
.table {
background: lightsalmon;
width: 1500px;
height: 100px;
} <div class="container">
<div class="left-container">
SIDEBAR
</div>
<div class="right-container">
<div class="header">
<div class="header-item">
HEADER ITEM 1
</div>
<div class="header-item">
HEADER ITEM 2
</div>
</div>
<div class="dashboard">
<div class="nav">
SOME INNER NAVIGATION
</div>
<div class="table-container">
TABLE CONTAINER
<div class="table">
TABLE
</div>
</div>
</div>
</div>
</div>关于css - 将内容溢出的 flex 元素拉伸(stretch)到其容器的全部可用宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58062155/