Solo trato de familiarizarme con el viento de cola.

Tengo un componente de cuadrícula en mi proyecto React.Js. El objetivo principal de esto es dibujar algunas líneas verticales como una superposición. Esto es lo que parece:

 //hours are just some hours of the day return ( <div className="w-full h-full inline-flex absolute"> <div className="w-10" /> { hours.map(_ => <div className="flex-grow border-l-2 border-black h-full" />) } </div>);

Ahora tengo un componente principal, que tiene este componente de cuadrícula como:

 const ParentX = ({ children }: Props) => { return ( <div> <GridX /> { children } </div>); }; export { ParentX };

Ahora, el problema al que me enfrento es que quiero que la cuadrícula tome altura solo la altura que está tomando el padre, notando más que eso. Así que puse h-full . Y el padre tomará la altura de los hijos del padre, los elementos JSX se pasan como accesorios. En cambio, está tomando toda la pantalla.

Aquí hay un complemento:

El final de esas líneas horizontales es el final de esos componentes secundarios. Entonces mi pregunta es, ¿por qué la línea vertical ocupa toda la altura? ¿Cómo puedo simplemente llenar el padre?