100% 宽度的固定位置元素超出父容器

Question

我希望display: flex with position: fixed具有与其父级相同大小的宽度。 但是，我下面的代码超出了父容器。

这是我已经尝试过的。 请检查下面的小提琴

 .container { width: 400px; padding: 5px; background-color: red; } .flex { display: flex; position: fixed; height: 100px; width: 100%; background: pink; }

 <div class="container"> <div class="flex"> <div class="items"></div> <div class="items"></div> <div class="items"></div> </div> </div>

我想要的是，当我将.flex容器设置为width: 100% with position: fixed时，它应该具有与其父.container相同的宽度。

Answer 1

使用position:sticky代替

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } .container { width: 400px; height: 200vh; padding: 0 5px; background: linear-gradient(red, blue); } .flex { display: flex; position: sticky; top: 0; height: 100px; background: pink; }

 <div class="container"> <div class="flex"> <div class="items"></div> <div class="items"></div> <div class="items"></div> </div> </div>

Answer 2

除了position:sticky之外，如果父级的宽度始终定义为长度而不是百分比，您还可以考虑inherit ：

 .container { width: 400px; padding: 5px; background-color: red; } .flex { display: flex; position: fixed; height: 100px; width: inherit; background: pink; }

 <div class="container"> <div class="flex"> <div class="items"></div> <div class="items"></div> <div class="items"></div> </div> </div>