Question

我不得不经历很多反复试验，才能将孩子的宽度限制在父母的最小和最大宽度之间。为了使其正常工作，我不得不将父级的位置更改为fixed或absolute。

为什么这样做？

问题确实在具有header的{{1}}选择器上。我以为它将仅用完父级的width: 100%，但是看起来max-width的宽度确定后它会计算自己的宽度。这真的很令人困惑，我希望有人能解释一下。

content

.container {
  position: absolute;
  height:  40px;
  background-color: pink;
  max-width: 400px;
  min-width: 200px;
}

.header {
  height: 20px;
  width: 100%;
  background-color: lightblue;
}

.content {
  width: 360px;
  background-color: lightgrey;
  height: 20px;
}

编辑：我添加了react-native作为标签，因为这似乎在这里不起作用。但我想充分理解为什么它可以在浏览器上运行，并可能寻求其他方法来实现它。

Answer 1

之所以起作用，是因为绝对定位元素（包括固定定位元素）的自动宽度是使用“收缩配合”确定的。参见CSS2规范的section 10.3.7。

已被确定为百分比的.header的宽度在确定其包含块的宽度（由.container建立的宽度）之前无法确定。（这与容器的显示或放置方式无关。）

由于唯一为绝对定位的.container提供任何宽度以确定其宽度的后代是.content，其宽度为360px，因此.container的宽度会缩小以适合该宽度360px，介于min-width和max-width约束之间。

现在.container的宽度已确定为360px，.header的大小现在可以是该360px的100％。

为什么固定/绝对元素的宽度会退回到子级？

1 个答案: