如何使块填满父元素的宽度（不仅限于可见窗口）？

Question

当我水平滚动页面时，如何让块B像块A一样填充整个宽度？

HTML:

<div id="main">
  <div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div style="background-color:lightblue;">B</div>
</div>

CSS：

#main div {
    display: inline-block; /*or block*/
    min-width: 100%;
    height: 50px;
}

https://jsfiddle.net/tombrito/hc9b8s06/1/

- The Student

---

我不明白，你想让块b与滚动条交叉吗？ - Baldráni

Answer 1

这种情况的原因是区块A超出了其父级容器，而区块B的宽度刚好等于其父级容器。

相反地，你应该让父级容器自动扩展以包含区块A。你可以通过以下方式实现：

#main {
  display: inline-block; /* (at least) as wide as contents */
  min-width: 100%; /* but grow to fill available space, if any */
}

#main {
  display: inline-block;
  min-width: 100%;
}
#main div {
  display: inline-block; /*or block*/
  min-width: 100%;
  height: 50px;
}

<div id="main">
  <div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
  <div style="background-color:lightblue;">B</div>
</div>

- Oriol

---

忘记了父级。;) - dippas