这个问题在这里已有答案：
我有一些问题让flex-x的子容器具有overflow-x占用其内容的全宽度 .
目标是让内容项使用“flex：1 0 216px”，当它们不能全部适合屏幕时，会出现滚动条，以便用户可以滚动查看其余内容 . 但正如你在下面的代码片段中看到的那样，由于某种原因“.row”div不会占用它的父“.container”的全宽，导致背景颜色和边框无法到达内容的边缘 . 我已经将容器的背景变为灰色以强调问题 .
这是代码的简化版本 . 谢谢！
.container {
height: 100%;
background-color: lightgray;
overflow-x: auto;
}
.row {
background: lightyellow;
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid gray;
display: flex;
align-items: center;
flex-basis: 100%;
width: 100%;
}
.content {
flex: 1 0 216px;
}
<div class="container">
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
1 回答
flex和overflow之间肯定存在一些问题：auto，我只是没有太深入 . 如果只是为了实现.row元素的全宽，而不是
width: 100%;你可以设置min-width: calc(4 * 216px);，（因为你在.content上设置了flex-shrink: 0和flex-basis: 216px;，我认为.content永远不会小于...）