Tengo un div con varias secciones diferentes, una de las cuales es una lista desplazable dentro del div.
El área desplazable varía según el tamaño de la pantalla y debe ocupar todo el espacio restante del padre. Hasta ahora, solo sé cómo hacer que se desplace si especifico la altura del div desplazable. Esto, por supuesto, no tendrá un tamaño único para todos cuando se trate de diferentes tamaños de pantalla.
Si alternativamente configuro la altura de mi div desplazable al 100%, entonces, por supuesto, pierdo mi capacidad de desplazamiento. Así que eso tampoco es bueno.
¿Como puedo resolver esto?
Aquí hay una aplicación de muestra que ilustra el problema:
const App = () => { return ( <div className="container"> <div> <h2>My Content</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h3>Scrollable section that must fill in the rest of the space</h3> <div className="scrollable-div"> {[...Array(50).keys()].map((_, index) => ( <div>item {index}</div> ))} </div> </div> </div> ); } ReactDOM.render( <App />, document.getElementById('app') ); .container { height: 500px; border: 2px solid black; overflow: hidden; } .scrollable-div { overflow: auto; border: 3px solid red; /* this all works fine, but I need the scroll section to go all the way to the end of the parent div, regardless of the screen size. How can I do this without setting a fixed height here? */ height: 250px; /* the alternative, which would allow this div to expand all the way down to the reminder of the parent is set height to 100%, however then I lose my ability to scroll. */ } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>Ejecute el fragmento y haga clic en 'página completa', luego la escala del navegador y el área de desplazamiento deben ser dinámicas en altura. Solo probado en Chrome por cierto.
const App = () => { return ( <div className="container"> <div className="inner"> <h2>My Content</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h3>Scrollable section that must fill in the rest of the space</h3> <div className="scrollable-div"> {[...Array(50).keys()].map((_, index) => ( <div>item {index}</div> ))} </div> </div> </div> ); } ReactDOM.render( <App />, document.getElementById('app') ); .container { display: flex; flex-direction: column; border: 2px solid #2B3239; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .inner { padding: 12px; background: #EFF2F5; min-height: 0; display: flex; flex-direction: column; } .scrollable-div { background: white; border: 2px solid #FF6F6F; flex-grow: 1; overflow: scroll; padding: 12px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>