<分区>
<分区>
我在一个显示设置为 flex 的父级 div 中有 5 个子级 div。
我已经为每个子元素指定了 100px 的宽度，但它们仅以父元素 div 宽度的 1/5 呈现。
我已经用 overflow: scroll 设置了父级 div，希望它能让子级扩展到设置的大小，但现在确实如此。如何让子 div 成为我给它的宽度？
.parent {
display: flex;
width: 350px;
height: 150px;
background-color: #dedede;
align-items: center;
overflow-x: hidden;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
margin-left: 5px;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>最佳答案
将 flex-shrink 更改为 0，这样 flexbox 就不会收缩子项以适应父项的宽度:
.parent {
display: flex;
width: 350px;
height: 150px;
background-color: #dedede;
align-items: center;
overflow-x: auto;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
margin-left: 5px;
flex-shrink: 0;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child always-show"></div>
</div>另一种选择是设置使用flex快捷方式设置growth 0/shrink 0/basis 100px，并去掉宽度声明:
.parent {
display: flex;
width: 350px;
height: 150px;
background-color: #dedede;
align-items: center;
overflow-x: auto;
}
.child {
flex: 0 0 100px;
height: 100px;
background-color: blue;
margin-left: 5px;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child always-show"></div>
</div>关于html - 为什么 flex 元素的子元素没有以我为其设置的宽度显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58848778/