Tengo la siguiente configuración:
.page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } main { height: 90%; background-color: beige; width: 100%; display: flex; flex-flow: column; } .container-dynamic { width: 100%; height: 400px; border: 1px dashed grey; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } p { text-aling: center; } .container-fill { width: 80%; border: 1px dashed black; height: auto; flex: 1 1 auto; } .c { width: 100%; background-color: lightgreen; padding: 10px; max-height: 100%; overflow: scroll; flex: 1 1 auto; } .b { width: 80%; height: 200vh; background-color: lightblue; } <div class="page"> <header> HALLO </header> <main> <div class="container-dynamic"> <p>This container has dynamic height</p> </div> <div class="container-fill"> <p>This container fills up the left space</p> <div class="c"> <div class="b"> </div> </div> </div> </main> </div> ahora, como puede ver, el área verde es mucho más grande que todo el elemento .page . Lo que estoy tratando de lograr es hacer que el área verde llene el espacio izquierdo en la página. Lo logré con flex: 1 1 auto en .c y con display: flex, flex-flow: column en el elemento main . Además de eso, necesito que el área verde sea desplazable, cuando los niños (aquí el rectángulo azul claro .b ) es demasiado grande para caber en él sin desbordamiento. Pero configurar el overflow: scroll en el elemento verde no tiene ningún efecto y da como resultado el ejemplo de código dado. Si alguien pudiera ayudarme en cómo lograr mi objetivo, estaría muy agradecido.
Por supuesto, esto se puede lograr calculando la altura restante a través de JavaScript, pero me gustaría saber si también hay un método solo CSS.
.page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } main { height: 90%; background-color: beige; width: 100%; display: flex; flex-flow: column; } .container-dynamic { width: 100%; height: 400px; border: 1px dashed grey; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } p { text-aling: center; } .container-fill { width: 80%; border: 1px dashed black; height: 100%; flex: 1 1 auto; } .c { width: 100%; background-color: lightgreen; padding: 10px; max-height: 100%; overflow: scroll; flex: 1 1 auto; box-sizing: border-box; } .b { width: 80%; height: 200vh; background-color: lightblue; } .scroll-elem-container { flex-grow: 1; overflow: hidden; } <div class="page"> <header> HALLO </header> <main> <div class="container-dynamic"> <p>This container has dynamic height</p> </div> <div class="scroll-elem-container"> <div class="container-fill"> <div class="c"> <div class="b"> </div> </div> </div> </div> </main> </div>