¿Es posible evitar el ajuste de elementos secundarios en HTML?

Question

.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

I cuando el tamaño de la ventana del navegador es más pequeño de lo que permitirá que todos los niños quepan sin envolver Me gustaría que haya una barra de desplazamiento, no el mecanismo predeterminado del ajuste de elementos secundarios.

No tengo el control del número de elementos secundarios, por lo que no puedo establecer un ancho en el contenedor. ¿Cómo puedo evitar que se envuelvan los elementos secundarios?

Answer 1

Si no desea envolver, no debe usar flotadores, fueron creados específicamente para envolver.

Utilice un contenedor primario con overflow:auto y white-space:nowrap y niños con display:inline o inline-block.

Answer 2

Esto no es posible con HTML y CSS simples. Sin conocer la cantidad de elementos secundarios, la única forma sería establecer dinámicamente un ancho mínimo utilizando JavaScript, según la cantidad de elementos secundarios y su ancho total.

Answer 3

Puedes agregar un portapapeles() de todos los childes. Y luego usa el desbordamiento: auto de ese div. Si eso no funciona, también use self.innerHeight y self.innerWidth (a través de javascript) para la altura y ancho del div.