Estoy haciendo un diseño similar a una tabla usando flexbox.
Tiene un cuerpo, hileras y celdas.
Las celdas tienen anchos fijos en píxeles.
El cuerpo debe ser desplazable horizontalmente.
Me gustaría lograr que las filas tengan el mismo ancho que los anchos acumulativos de las celdas.
Aquí está el codepen .
<div class="grand-parent"> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> <div>¿Hay alguna forma de hacer esto usando solo CSS?
PD: sé que puedo calcular los anchos usando JS y configurarlo como principal, o puedo configurar el color de fondo como abuelo para que se vea mejor, pero eso no es lo que necesito aquí.
una forma es no fijar el tamaño en el componente secundario, sino usar flex-grow: 1; para dejarles tomar todos los tamaños disponibles
.child { flex-grow: 1; color: white; background: blue; border: 1px solid black; }O
si desea forzar el contenedor para que tome el ancho del niño, debe:
.child tiene display: inline-flex;
.parent tiene width: max-content;
.parent { background: red; padding: 2em 0; width: max-content; } .child { display: inline-flex; width: 300px; color: white; background: blue; border: 1px solid black; }siguiendo el fragmento de ejecución de esta respuesta
.grand-parent { width: 800px; overflow: auto; } .parent { display: flex; background: red; padding: 2em 0; } .child { flex-grow:1; color: white; background: blue; border: 1px solid black; } .parent2 { background: red; padding: 2em 0; width: max-content; } .child2 { display: inline-flex; width: 300px; color: white; background: blue; border: 1px solid black; } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5); } <h1> child take width of parent</h1> <div class="grand-parent"> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> <div> <h1> parent take width of child</h1> <div class="grand-parent"> <div class="parent2"> <div class="child2">Child 1</div> <div class="child2">Child 2</div> <div class="child2">Child 3</div> </div> <div class="parent2"> <div class="child2">Child 1</div> <div class="child2">Child 2</div> <div class="child2">Child 3</div> </div> <div>Bueno, al igual que la respuesta de Jeremy, puede configurarlos para que ocupen el espacio disponible
O
En lugar de hacer que el grand-parent tenga un ancho fijo, puede configurar el parent para que tenga un ancho fijo;
.parent { display: flex; background: red; padding: 2em 0; width: 800px; overflow: auto; } Tomé todos los estilos de grand-parent y los agregué al estilo de los parent .
El siguiente fragmento funciona perfectamente bien:
.parent { display: flex; background: red; padding: 2em 0; width: 800px; overflow: auto; } .child { flex: 0 0 300px; color: white; background: blue; border: 1px solid black; } <div class="grand-parent"> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> </div>