具有不继承宽度的 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

您必须为 parent 设置一个 width。这是因为只要元素绝对定位，width 和 height 就会自动设置为 auto。因此，在您的情况下，child 的 flex-wrap: wrap 将导致溢出，除非为绝对定位的 parent.

指定了 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;
}

具有不继承宽度的 flex 增长子项的绝对定位父项

absolute positioned parent with a flex growing child not inheriting width

html

css

absolute

flexbox