Question

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

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

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

Stack snippet

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>

相对定位溢出的柔性容器的全宽度

1 个答案: