I have a parent div whose size is not constant it changes according to the content but when the content increases it scrolls and doesn't expand, So I have a child div which is 100% width and height of the parent. But when the parent div becomes scrollable the child div is not expanding into the scrollable area. How to make the div expand to the scrollable area.
.parent {
width: 400px;
height: 400px;
overflow: auto;
border: 2x solid black;
}
.child {
width: 100%;
height: 100%;
background: #0088ff;
position: absolute;
}<div class="parent">
<div class="child">
Some random content
</div>
</div>Here assume the random content is a draggable node and if I drag it off the parents width the .parent is getting automatically bigger and the scrollbar appears but the .child div is not getting bigger.
You can use :focus-within pseudo-class and tabindex attribute in it. example:
.parent{
height:50px;
overflow:hidden;
}
.child{
height:50px;
}
.parent:focus-within{
overflow:auto;
height:auto;
}
.arrow{
display:inline-block;
}
.parent:focus-within .arrow{
transform:rotateZ(90deg);
}<div class="parent">
<div class="child">
<div tabindex="0">Click Me!
<div class="arrow">></div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et magna congue, suscipit leo at, vehicula erat. Sed pharetra imperdiet risus non sodales. Suspendisse interdum, leo id cursus fringilla, tortor dui egestas risus, nec volutpat sapien justo quis ex. Donec eget tellus nulla. Vestibulum erat erat, dapibus hendrerit ligula non, tincidunt congue lectus. Suspendisse potenti. Praesent id nibh eu tortor mollis rhoncus in sit amet leo. Fusce ac purus iaculis, aliquam mi vel, congue nulla. Quisque condimentum tellus dolor, et ullamcorper turpis efficitur sed. Nulla facilisi. Suspendisse et fringilla ipsum. Donec tempus suscipit risus eget pulvinar. Morbi semper tincidunt luctus.
</div>