Tengo un div principal cuyo tamaño no es constante, cambia según el contenido, pero cuando el contenido aumenta, se desplaza y no se expande , así que tengo un div secundario que es 100% ancho y alto del padre. Pero cuando el div principal se vuelve desplazable, el div secundario no se expande en el área desplazable. Cómo hacer que el div se expanda al área desplazable.
.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> Aquí supongamos que el contenido aleatorio es un nodo arrastrable y si lo arrastro fuera del ancho de los padres, el .parent se hace automáticamente más grande y aparece la barra de desplazamiento, pero el div .child no se hace más grande.
Puede usar :focus-within pseudo-class y el atributo tabindex en él. ejemplo:
.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>