css - 如何使父级(不仅是可见窗口)的 block 填充宽度？

Question

水平滚动时，如何让B block 像A block 一样填满宽度？

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/

Answer 1

发生这种情况是因为 block A 溢出父级，而 block B 仅与父级一样宽。

相反，您应该扩展父级以包含 block 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>