由于绝对定位元素，CSS Div 不随父级滚动而增长

Question

我遇到了 CSS 布局的问题，当父级的水平滚动增加时，父级 div (#container) 中的子级 div (#normal) 不会按预期增长。该问题似乎与另一个子 div (#absolute) 有关，它绝对位于 #container 内。

这是我的简化代码：

#container {
    overflow-x: scroll;
    position: relative;
    height: 200px;
}

#absolute {
    position: absolute;
    left: 1500px;
    background-color: red;
    width: 20px;
    height: 20px;
}

#normal {
    width: 100%;
    position: relative;
    background-color: blue;
    height: 20px;
}

<div id="container">
   <div id="absolute"></div>
   <div id="normal"></div>
</div>

问题是，由于 #absolute div 的 left 属性，当 #container 的水平滚动增加时，#normal div 不会扩展其宽度。我尝试将 #container 和 #normal 的位置设置为相对位置，但并没有解决问题。

有没有办法让#normal div随着#container的内容水平变大而动态增长，即使存在像#absolute这样的绝对定位元素？

Answer 1

在您的问题中，

position: absolute;

似乎不可能实现这一点。但你可以这样做：

#container {
  overflow-x: scroll;
  height: 200px;
  display: grid;
  grid-template-rows: 0 auto;
  --absolute-size: 20px;
}

#absolute {
  width: calc(1500px + var(--absolute-size));
  position: relative;
}

#absolute:after {
  content: '';
  position: absolute;
  width: var(--absolute-size);
  height: var(--absolute-size);
  background-color: red;
  right: 0;
}

#normal {
  background-color: blue;
  height: var(--absolute-size);
}

<div id="container">
  <div id="absolute"></div>
  <div id="normal"></div>
</div>