Tengo un contenedor principal con flex-direction: row y varios elementos secundarios con un max-width . Estoy tratando de hacer que el padre se expanda tan ancho como los elementos secundarios por debajo de sus anchos máximos, pero no más ancho.
parent { display: flex; flex-direction: row; width: 100%; } child { max-width: 100px; } <div className={parent}> <div className={child}>Child 1</div> <div className={child}>Child 2</div> <div className={child}>Child 3</div> </div>Esto expande el padre a través de la vista disponible, lo que no quiero porque empuja otro elemento que tengo en una columna adyacente, creando una brecha incómoda.
Pero si cambio el ancho a algo como fit-content , colapsa los elementos secundarios más pequeños que sus anchos máximos.
¿Cómo hago que el contenedor principal sea tan ancho como los anchos máximos secundarios, pero no más ancho (y al mismo tiempo puedo reducir los elementos secundarios si el tamaño de la ventana se condensa)?
Debe usar display: inline-flex y eliminar width:100% del padre.
$(document).ready(function () { $("[type=range]").change(function () { const width = $(this).val(); $('.child').css('width',width+"px") }); }); .parent { display: flex; flex-direction: row; border:3px solid red; display: inline-flex; } .child { max-width: 200px; height: 20px; background: lightblue; margin: 5px; padding:5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 1</div> <div class="child">Child 1</div> <div class="child">Child 1</div> </div> <div class="range-container"> <input type="range" id="points" name="points" min="50" max="200"> </div>