绝对定位的容器不会扩展宽度以适应弹性框内容

Question

我在绝对定位的父div内有一个flexbox。我希望flexbox有一个computed width，导致父div扩展，但这不会发生。 父div 有一些宽度，但它的宽度不足以容纳弹性框。

鉴于弹性框有四个子项，每个子项都有flex-basis: 100px，并且flex-shrink: 0，我希望弹性框的宽度为400px，导致父div 扩展到内容宽度的400px。相反，它正在扩展到看似任意的255px。

.parent {
position: absolute;
padding: 10px;
background: red;
}
.flex {
display: flex;
}
.flex-child {
flex: 1 0 100px;
background: #EEE;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}

<div class="parent">
<div class="flex">
<div class="flex-child">One</div>
<div class="flex-child">Two</div>
<div class="flex-child">Three (really really long)</div>
<div class="flex-child">Four</div>
</div>
</div>

Answer 1

您的代码在 Edge 中工作。

它在Firefox和Chrome中不起作用。

这似乎是这些浏览器中flex-basis的错误。

有一个简单的解决方法：使用width代替flex-basis。

.parent {
position: absolute;
padding: 10px;
background: red;
}
.flex {
display: flex;
}
.flex-child {
/* flex: 1 0 100px; */
width: 100px;
flex-grow: 1;
flex-shrink: 0;
background: #EEE;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}

<div class="parent">
<div class="flex">
<div class="flex-child">One</div>
<div class="flex-child">Two</div>
<div class="flex-child">Three (really really long)</div>
<div class="flex-child">Four</div>
</div>
</div>

js小提琴演示

另请参阅：

• 弹性基础和宽度有什么区别？

Answer 2

我能够使元素适合绝对定位元素的唯一方法是更改以下行

.flex-child {
flex: 1 1 100px;
...
}

之后，.flex元素占据了.parent元素，如果我增加任何宽度，红色区域就会扩大。

这对你有用吗？