Question

我有一个flexed div的孩子，其中我想要的所有孩子都是100％的dom（其他人的屏幕将在以后转换时转换）。我通过给出100%*numChildren的弯曲父宽度并给每个孩子width 100%;来做到这一点。

除了我在其中一个孩子中有position fixed的模态弹出窗口外，这个工作正常。此位置已修复width和height 100%;然而，它似乎基于几百％flex parent的那些值，而不是实际的dom。 Absolute做同样的事情。为什么会这样？我该如何解决？

1）我应该这样做吗？如果我不这样做，我有一个问题，即widths的孩子不满足100%.

我想覆盖以下行为：

https://developers.google.com/web/updates/2016/06/absolute-positioned-children

Answer 1

您可以使用width: 100%，而不是width: 100vw，这意味着视口的宽度。或者使用绝对定位弹出项目和相对定位到弹性项目。

＆＃13;

html, body {
  margin: 0;
}
#container {
  display: flex;
  height: 100vh;
  overflow-x: scroll;
}
#container > div {
  width: 100vw;
  flex-shrink: 0;
  border: 5px solid blue;
  box-sizing: border-box;
  position: relative;
}
.abs {
  position: absolute;
  width: 100%;
  top: 100px;
  left: 0;
  border: 5px solid red;
  box-sizing: border-box;
}

＆＃13;

<div id="container">
  <div>1<span class="abs">Absolute</span></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

＆＃13;

修复了flexed div继承flex属性的子项

1 个答案: