css - CSS如何正确使用带有flex子元素的绝对定位容器？

Question

让我们通过我的问题的简化示例直接进入代码。

body {
  font-family: Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.container1 {
  border: 2px solid black;
  display: flex;
}

.child {
  padding: 10px;
}

.w100 {
  width: 100px;
}

.f200 {
  flex: 0 0 200px;
}

.green {
  background: #5fd700;
}

.purple {
  background: #9e00ff;
}

.rel {
  position: relative;
  margin-bottom: 80px;
}

.container2 {
  position: absolute;
  border: 2px solid black;
  display: flex;
}

<h2>Container with position: static</h2>
<h3>width: 100px</h3>
<div class="container1">
  <div class="child green w100">
    child1
  </div>
  <div class="child purple w100">
    child2
  </div>
</div>

<h3>flex-basis: 200px</h3>
<div class="container1">
  <div class="child green f200">
    child1
  </div>
  <div class="child purple f200">
    child2
  </div>
</div>

<h3>width: 100px; flex-basis: 200px</h3>
<div class="container1">
  <div class="child green w100 f200">
    child1
  </div>
  <div class="child purple w100 f200">
    child2
  </div>
</div>

<hr>

<h2>Container with position: absolute</h2>
<h3>width: 100px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green w100">
      child1
    </div>
    <div class="child purple w100">
      child2
    </div>
  </div>  
</div>

<h3>flex-basis: 200px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green f200">
      child1
    </div>
    <div class="child purple f200">
      child2
    </div>
  </div>  
</div>

<h3>width: 100px; flex-basis: 200px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green w100 f200">
      child1
    </div>
    <div class="child purple w100 f200">
      child2
    </div>
  </div>  
</div>

我想要绝对定位的容器根据它的 flex 孩子的大小来调整它的宽度。从上面的屏幕截图中可以清楚地看出，当孩子明确设置时，一切都按预期工作width，但是当我开始使用flex-basis时，布局停止按预期工作。

使用 flex 容器 withposition:absolute和 childs with的正确方法是什么flex-basis？

标签： cssflexbox