绝对定位的父级，具有 flex 生长的子级不继承宽度

Question

我有一个弹性盒子，它会根据里面的内容逐列增长；盒子的宽度应该适合内容。我必须将此框放在绝对定位在页面上的父容器中。

如果这样做，父容器不会采用子容器的动态宽度，而是坚持其初始宽度并且子容器会溢出。

可用代码：https://jsfiddle.net/visu310p/q8hsk42L/8/

.parent {
  color: white;
  background: blue;
  margin: auto;
  padding: 1em;
  position: absolute;
  left: 10px;
  top: 100px;
}
.child {
  background-color: green;
  display: flex;
  height: 100px;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}

Answer 1

您必须为父级设置width。这是因为每当一个元素被绝对定位时，width 和 height 都会自动设置为 auto。所以在你的情况下，孩子的flex-wrap: wrap 将导致溢出，除非为绝对定位的父母指定width。

.parent {
  color: white;
  background: blue;
  margin: auto;
  padding: 1em;
  position: absolute;
  left: 10px;
  top: 100px;
  width: calc(100% - 20px); /* can be any value */
}
.child {
  background-color: green;
  display: flex;
  height: 100px;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}