¿Cómo puedo tener un contenedor principal que cumpla las siguientes condiciones:
Ya tengo lógica para 1, 3 y 4, pero no estoy seguro de cómo implementar la segunda condición. Aquí hay un código de muestra que escribí:
.parent { height: 400px; width: 80%; margin: 100px auto; max-height: 80vh; border: solid 5px black; overflow: scroll; } .child { border: solid 5px red; width: auto; height: 550px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>Creo que estoy buscando algo como altura: max (400px, max-content). Pero, ¿es esto posible/cómo implementaría esto? Cualquier idea sería muy apreciada!
Desde MDN :
max-height anula la altura, pero min-height anula max-height.
Entonces, para asegurarse de que su condición 1 siempre se cumpla definitivamente (altura máxima de 80vh), no solo debe establecer la altura máxima en eso, sino que debe asegurarse de que si 400px es mayor que 80vh, la altura no supera los 80vh, de lo contrario, irá a 400px y anulará la altura máxima de 80vh.
max-height: 80vh; min-height: min(400px, 80vh);Si elimina la altura del padre, el padre tomará la altura del hijo, pero no más de 80vh esa es la altura máxima para el padre, por lo que si la altura del hijo es más de 80vh , el padre se desplazará por el resto de la altura del hijo.