相对定位的溢出 flex 容器的全宽

Question

我试图通过将left 和right 都设置为0 的absolute 定位子元素来在水平溢出的flex 容器上实现一条线，这也意味着容器必须有一个relative 位置包含绝对定位元素。这就是麻烦的开始。

因为容器有一个relative的位置，所以children的right值不在滚动视图的边缘，它在溢出开始的地方停止。

CodePen example

HTML 代码：

<div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

CSS 代码：

body > div {
  display: flex;
  overflow-x: scroll;
  position: relative;
}

body > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}

是否可以将子元素扩展到整个元素，包括溢出？

Answer 1

您可以通过使用inline-flex 而不是flex 来完成此操作

Updated codepen

堆栈sn-p

body > div {
  display: inline-flex;                /*  changed  */
  overflow-x: scroll;
  position: relative;
}

body > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}

<div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

---

或者，您可以添加具有inline-block 的外包装

body > div {
  display: inline-block;
}

body > div > div {
  display: flex;
  overflow-x: scroll;
  position: relative;
}

body > div > div::before {
  content: '';
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  background: #000;
}

body > div > div > div {
  align-items: stretch;
  position: relative;
  min-width: 900px;
  height: 300px;
}

<div>
  <div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
</div>