绝对定位的容器不扩展宽度以适应 flexbox 内容

Question

我在绝对定位的 parent div 中有一个 flexbox。我希望 flexbox 有一个 computed width，导致 parent div 扩展，但这并没有发生。 parent div 有一些宽度，但宽度不足以容纳 flexbox。

鉴于 flexbox 有四个 children，每个 flex-basis: 100px，和 flex-shrink: 0，我希望 flexbox 的宽度为 400px，导致parent 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

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

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

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

这对你有用吗？

Answer 2

您的代码在 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>

jsFiddle demo

另见：

绝对定位的容器不扩展宽度以适应 flexbox 内容

Absolutely positioned container not expanding width to fit flexbox content

html

css

css-position

flexbox