Sergei Sekatski Sergei Sekatski - 2 months ago 6x
CSS Question

How to resize child width

I have nice css task:

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

.p1 {
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?


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.