How can I set div width same as parent, when scroll appears?

Demo

Html

When vertical scroll appears, also horizontal scroll appears and elements in div are still wider then div container. Screen

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

.element {
  background: #CD8115;
}

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

Solution

Set the list's css class with value display: inherit. This will make the child span the entire width.

.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>