Como fazer um DIV não envolver?

Preciso criar um estilo DIV de contêiner que contenha vários outros DIV. É solicitado que esses DIVs não sejam quebrados se a janela do navegador for redimensionada para ser estreita.

Eu tentei fazê-lo funcionar como abaixo.

<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>

Isso funciona na maioria dos casos. No entanto, em alguns casos especiais, a renderização está incorreta. Encontrei o DIV do contêiner alterado para a largura de 3000 px no RTL do IE7; e acaba ficando bagunçado.

Existe alguma outra maneira de fazer um DIV de contêiner não envolver?

Tente usar white-space: nowrap;no estilo do contêiner (em vez de overflow: hidden;)

Se não quero definir uma largura mínima porque não sei a quantidade de elementos, a única coisa que funcionou para mim foi:

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

Mas apenas no Chrome e Safari: /

O seguinte funcionou para mim sem flutuar (modifiquei seu exemplo um pouco para obter efeito 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>

Os divs podem ser separados por espaços. Se você não quiser isso, use em margin-right: -4px;vez de margin: 5px;para .slide(é feio, mas é um problema complicado de lidar ).

A combinação que você precisa é

white-space: nowrap

no pai e

display: inline-block; // or inline

nas crianças

Isso funcionou para mim:

.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: hiddendeve lhe dar o comportamento correto. Meu palpite é que RTLestá bagunçado porque você tem float: leftos divs encapsulados .

Além desse bug, você tem o comportamento certo.

Tente usar width: 3000px;para o caso do IE.

Nenhuma das opções acima funcionou para mim.

No meu caso, eu precisava adicionar o seguinte ao controle de usuário que havia criado:

display:inline-block;

A min-widthpropriedade não funciona corretamente no Internet Explorer, o que provavelmente é a causa dos seus problemas.

Leia informações e um script brilhante que corrige muitos problemas de CSS do IE .

você pode usar

display: table;

para o seu contêiner e, portanto, evite o overflow: hidden;. Deve fazer o trabalho se você o usou apenas para propósitos de distorção.

<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>

Use display:flexewhite-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>

A <span>tag é usada para agrupar elementos embutidos em um documento.
(fonte)