Question

我希望带有display: flex的{{1}}的宽度与其父级的宽度相同。但是，下面的代码超出了父容器。

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

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时，.container容器应具有与其父width: 100%相同的宽度。

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>

宽度为100％的固定位置元素超出了父容器

2 个答案: