title: How to resize child width
body: <p>I have nice css task:<br>
  <a href="http://jsfiddle.net/2ghb3ahc/12/" rel="nofollow">http://jsfiddle.net/2ghb3ahc/12/</a>  </p>
  
  <pre><code>    &lt;div class="p1"&gt;
        &lt;p&gt;204204204200420424204204204420420420420420420000420&lt;/p&gt;
        &lt;div class="p2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      .p1 {
        width:300px;
        height: 200px;
        border: 1px solid #000; 
        overflow-x: scroll;}
      .p2 {
        height: 30px;
        background: #902457; 
        display: block;
     }
  </code></pre>
  
  <p>I have parent div-element (with fixed width=300px and style property "overflow-x scroll") and two nested elements (p-element and div-element). P-element has innerHTML size greater than parents div-element width. At this moment nested div-element width is equal parents div-element width. Question is how (with css only) I can adjust nested div-element width: make it equal nested p-element width?</p>