如何调整子宽度

Question

我有很好的CSS任务：
http://jsfiddle.net/2ghb3ahc/12/

    <div class="p1">
      <p>204204204200420424204204204420420420420420420000420</p>
      <div class="p2"></div>
    </div>

    .p1 {
      width:300px;
      height: 200px;
      border: 1px solid #000; 
      overflow-x: scroll;}
    .p2 {
      height: 30px;
      background: #902457; 
      display: block;
   }

我有父div元素（固定宽度= 300px和样式属性＆＃34; overflow-x scroll＆＃34;）和两个嵌套元素（p元素和div元素）。 P元素的innerHTML大小大于父div元素宽度。此时嵌套的div元素宽度等于父元素div元素宽度。问题是如何（仅使用css）我可以调整嵌套的div元素宽度：使它等于嵌套的p元素宽度？

Answer 1

您可以通过在滚动容器中使用包装器元素，然后将display: inline-block;应用于该包装器和宽元素来实现此效果。

http://jsfiddle.net/o3eejno1/