title: How to set Child div width 100% while parent over flow?
body: <p>How to set top panel width (red color in the following image) always set to 100%
  <img src="https://i.stack.imgur.com/X5rOn.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/azzi/aqx5Ln90/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>this is my code. I dont need to increase the parent width and the panel should increase the size.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;style type="text/css"&gt;
              .lib{
               border: 2px solid black;
               width: 200px;
               height: 300px;
               background-color: yellow;
               overflow: auto;
  
              }            
              .panel{
                  background-color: red;
                  width: 100%;
                  height: 20px;
              }
  
          &lt;/style&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="lib"&gt;
              &lt;div class="panel"&gt;&lt;/div&gt;
  
              &lt;ol&gt;
                  &lt;li&gt;test test test test test test test test test &lt;/li&gt;
                  &lt;li&gt;test testtesttesttesttesttest testtesttesttest &lt;/li&gt;
                  &lt;li&gt;test testtesttesttesttesttesttesttesttest &lt;/li&gt;
                  &lt;li&gt;test testtesttesttesttesttesttesttesttesttest &lt;/li&gt;
                  &lt;li&gt;test testtesttesttesttesttesttesttesttesttest &lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>