Entonces child div tiene una lista de elementos uno al lado del otro, cada uno con un ancho fijo.

En esta imagen, el div secundario se extiende más allá de MainContent, pero en la aplicación real, MainContent se extiende para ajustarse al ancho del div secundario.

Me gustaría hacer que cuando el niño se desborde, solo tenga una rueda de desplazamiento en lugar de volverse tan grande.

He intentado configurar Child Div en 'overflow-x: auto'

El ancho de div secundario está al 100 %, al igual que MainContent.

JSX/HTML

 <div className = 'app'> <div className = 'navbar'></div> <div className = 'maincontent'> <div className = 'child'> <div className = 'childlist'> <button className = 'btn'></button> <button className = 'btn'></button> <button className = 'btn'></button> </div> </div> </div> </div>

CSS

 .app : { display : flex, width: 100vw, height :100vh } .navbar : { display : flex, flex-direction :column, width : 112 } .maincontent:{ display : flex, width : 100% } .child: { width :100% } .childlist:{ display : flex, width :90% } .btn:{ width : 200, height :200 }