当滚动出现时，如何将div宽度设置为与父级相同？

Question

Demo

HTML

当出现垂直滚动时，也会出现水平滚动，div中的元素仍然比div容器宽。 Screen

.scroll {
  overflow-y: auto;
  background: #CCC;
  display: inline-block;
  height: 150px;
}

.element {
  background: #CD8115;
}

的CSS

<div class="scroll">
  <div class="list">
    <div class="element">111111111111111111111</div>
    <div class="element">22</div>
    ...
  </div>
</div>

Answer 1

使用值display：inherit设置列表css类。这将使孩子跨越整个宽度。

.list{
 display: inherit;
}

.scroll {
  overflow-y: auto;
  background: #CCC;
  display: inline-block;
  height: 150px;
}
.list{
  display: inherit;
}
.element {
  background: #CD8115;
}

<h2>With scroll</h2>
<div class="scroll">
  <div class="list">
    <div class="element">111111111111111111111</div>
    <div class="element">22</div>
    <div class="element">333333333</div>
    <div class="element">4444</div>
    <div class="element">5555555</div>
    <div class="element">66</div>
    <div class="element">777</div>
    <div class="element">8888</div>
    <div class="element">99999</div>
    <div class="element">0</div>
  </div>
</div>

<!-- Absolt same, exept height: auto-->
<h2>Without scroll</h2>
<div class="scroll" style="height: auto;">
  <div class="list">
    <div class="element">111111111111111111111</div>
    <div class="element">22</div>
    <div class="element">333333333</div>
    <div class="element">4444</div>
    <div class="element">5555555</div>
    <div class="element">66</div>
    <div class="element">777</div>
    <div class="element">8888</div>
    <div class="element">99999</div>
    <div class="element">0</div>
  </div>
</div>