Sergei Sekatski Sergei Sekatski - 3 months ago 9
CSS Question

How to resize child width

I have nice css task:

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;
}


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?

Answer

You can achieve the effect by using a wrapper element inside the scroll container and then applying display: inline-block; to that wrapper and the wide element.

http://jsfiddle.net/o3eejno1/

Comments