¿Cómo hacer que un DIV no se envuelva?

Necesito crear un estilo de contenedor DIV que contenga varios otros DIV. Se solicita que estos DIV no se ajusten si la ventana del navegador cambia de tamaño para ser estrecha.

Traté de hacerlo funcionar como a continuación.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

Esto funciona en la mayoría de los casos. Sin embargo, en algunos casos especiales, la representación es incorrecta. Encontré que el contenedor DIV cambia a 3000px de ancho en RTL de IE7; y resulta ser desordenado

¿Hay alguna otra forma de hacer que un contenedor DIV no se envuelva?

Intente usar white-space: nowrap;en el estilo contenedor (en lugar de overflow: hidden;)

Si no quiero definir un ancho mínimo porque no sé la cantidad de elementos, lo único que me funcionó fue:

display: inline-block;
white-space: nowrap;

Pero solo en Chrome y Safari: /

Lo siguiente funcionó para mí sin flotar (modifiqué un poco su ejemplo para obtener un efecto visual):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Los divs pueden estar separados por espacios. Si no quieres esto, úsalo en margin-right: -4px;lugar de margin: 5px;for .slide(es feo pero es un problema difícil de manejar ).

El combo que necesitas es

white-space: nowrap

en el padre y

display: inline-block; // or inline

en los niños

Esto funcionó para mí:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

overflow: hiddendebería darte el comportamiento correcto. Supongo que RTLestá en mal estado porque tienes float: leften el divs encapsulado .

Además de ese error, tienes el comportamiento correcto.

Intenta utilizarlo width: 3000px;para el caso de IE.

Nada de lo anterior funcionó para mí.

En mi caso, necesitaba agregar lo siguiente al control de usuario que había creado:

display:inline-block;

los min-width propiedad no funciona correctamente en Internet Explorer, que probablemente sea la causa de sus problemas.

Lea la información y un script brillante que soluciona muchos problemas de IE CSS .

puedes usar

display: table;

para su contenedor y por lo tanto evite el overflow: hidden;. Debería hacer el trabajo si lo usó solo con fines de deformación.

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Uso display:flexywhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

La <span>etiqueta se usa para agrupar elementos en línea en un documento.
(fuente)