Estoy haciendo un contenedor con 3 cartas. Cada tarjeta (color marrón en el ejemplo) tiene un encabezado con título (color arena) y contenido (azul).
Lo que quiero lograr es cuando las tarjetas están cerradas (haga clic en el encabezado en el ejemplo), el contenido (azul) está en transición a la altura 0, por lo que la única parte visible es el encabezado.
Además, cuando la tarjeta está abierta, quiero mostrar el contenido disponible, pero solo cuando haya suficiente espacio disponible en el contenedor (verde).
Cuando se abren 3 tarjetas, tienen la misma altura (se expanden uniformemente en el contenedor) y se desplaza el contenido restante (azul).
¿Es posible hacer? Preparé una demo codesandbox
Hice un pequeño ejemplo de código usando componentes con estilo (solo porque me gusta), puede cambiarlo fácilmente a componentes de reacción regulares con css, pero esto demuestra la idea.
Creé 3 cuadros, cada cuadro tiene una altura predeterminada (40 px) y después de hacer clic (que lo abre) su altura se establece en: 100%.
Envolver todas estas cajas con un contenedor flexible es el truco.
import styled from 'styled-components'; import React, { useState } from 'react'; const MyComponent = () => { return ( <Container> <BoxContainer height={100} number={1} /> <BoxContainer height={100} number={2} /> <BoxContainer number={3} /> </Container> ); }; export default MyComponent; const Container = styled.div` display: flex; flex-direction: column; justify-content: flex-start; width: 200px; height: 400px; overflow: hidden; border: 1px solid black; background-color: blue; `; const BoxContainer = ({ number, height = '100' }) => { const [open, setOpen] = useState(false); return ( <Box style={{ height: open ? '100%' : '40px' }} onClick={() => setOpen(!open)}> Box: {number} {open && <p>Content</p>} </Box> ); }; const Box = styled.div` width: 100%; overflow: scroll; background-color: #00b8a2; border: 1px solid red; `;ejemplo de sandbox aquí: https://codesandbox.io/s/boxes-fill-container-evenly-when-opened-btlvb