I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, the child div does not expand into the scrollable area when the parent is scrolled. How can I make the child div expand along with 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>In this scenario, imagine the random content being a draggable element. If I drag it outside the parent's original width causing the scrollbar to appear, the .parent div automatically expands to accommodate the content, but the .child div does not adjust its size accordingly.