Quiero dividir mi ventana gráfica en 2 secciones usando flex 1. En el área inferior, se requiere un contenedor con un elemento de desbordamiento. Sin embargo, no funciona bien. También tengo un desbordamiento de preguntas basado en la altura de corrección requerida por el padre flexible, por ejemplo. 50vh?. He intentado encontrar una solución que coincida con mi problema, pero no parece adecuada.
*{ margin: 0; padding: 0; } .container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; } .view{ flex: 1; background-color: red; } .management{ flex: 1; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; } .main-content{ overflow: auto; } <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> </div> </div> </div>mira si este es el resultado que buscas
*{ margin: 0; padding: 0; } .container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; } .view{ height:50%; background-color: red; } .management{ display:flex; flex-direction:column; height:50%; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; } .main-content{ height:100%; overflow-y:auto; } <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>last Item</p> </div> </div> </div>La respuesta correcta. El contenedor principal debe desbordar los artículos.
*{ margin: 0; padding: 0; } .container{ height: 100vh; width: 100vw; background-color: green; display: flex; flex-direction: column; } .view{ height: calc(100vh - 50vh); background-color: red; } .management{ height: calc(100vh - 50vh); width: 100%; background-color: blue; } header{ height: 40px; background-color: green; } p{ height: 30px; } .main-content{ height: calc(100% - 40px); width: 100%; overflow-y: auto; } <div class="container"> <div class="view"> 50% viewport </div> <div class="management"> <header>Title</header> <div class="main-content"> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> <p>Item</p> </div> </div> </div>