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

Question

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

为什么会这样？

问题实际上在于具有width: 100%的header选择器。我原以为它只会用完父级的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;
}

<div class='container'>
<div class='header'></div>
<div class='content' ></div>
</div>

编辑：我添加了反应原生作为标签，因为这似乎在那里不起作用。但我想完全理解为什么它可以在浏览器上运行，并可能寻求其他方法来做到这一点。

Answer 1

这是因为绝对定位元素(包括固定定位元素(的自动宽度是使用收缩以适合来确定的。请参阅 CSS2 规范的第 10.3.7 节。

.header的宽度，被指定为百分比，在确定其包含块的宽度(由.container建立的宽度(之前，无法确定。(无论容器如何显示或定位，都是如此。

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

现在.container的宽度已确定为 360px，.header现在可以调整为 360px 的 100%。