DIVをラップしないようにする方法は？

他の複数のDIVを含むコンテナーDIVスタイルを作成する必要があります。ブラウザウィンドウの幅が狭くなるようにサイズ変更された場合、これらのDIVは折り返さないように求められます。

以下のようにしてみました。

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

これはほとんどの場合に機能します。ただし、一部の特殊なケースでは、レンダリングが正しくありません。コンテナーDIVがIE7のRTLで幅3000pxに変更されているのを見つけました。そして、それは乱雑になります。

コンテナーDIVをラップしないようにする他の方法はありますか？

white-space: nowrap;（の代わりにoverflow: hidden;）コンテナスタイルで使用してみてください

要素の量がわからないために最小の幅を定義したくない場合、私に有効だったのは次のとおりです。

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

ただし、ChromeとSafariのみ：/

以下はフローティングなしで私のために働きました（視覚効果のためにあなたの例を少し変更しました）：

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

divはスペースで区切ることができます。これが必要ない場合はmargin-right: -4px;、margin: 5px;forの代わりに使用します.slide（醜いですが、を扱うのは難しい問題です）。

必要なコンボは

white-space: nowrap

親と

display: inline-block; // or inline

子供たちに

これは私のために働きました：

.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: hidden正しい動作が得られるはずです。私の推測では、カプセル化されたs RTLを使用しているため、混乱しています。float: leftdiv

そのバグのほかに、あなたは正しい振る舞いを得ました。

width: 3000px;IEの場合に使ってみてください。

上記のどれもうまくいきませんでした。

私の場合、作成したユーザーコントロールに以下を追加する必要がありました。

display:inline-block;

このmin-widthプロパティはInternet Explorerでは正しく機能しません。これが問題の原因である可能性が高いです。

情報と IE CSSの多くの問題を修正する素晴らしいスクリプトを読んでください。

あなたは使うことができます

display: table;

コンテナとそのためにはを避けてくださいoverflow: hidden;。ワーピング目的でのみ使用した場合は、それでうまくいくはずです。

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

使用display:flexしてwhite-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>

<span>タグは、文書のグループインライン要素に使用されます。
（ソース）