divがクリアされるのはなぜですか？

Question

私はfloat：leftプロパティを持つ2つのdivと、それらにいくらかの幅を持っています。オーバーフロー：隠されたプロパティを持つコンテナにラップされます。

ブラウザのサイズを水平方向に小さく変更すると、ウィンドウの幅が狭すぎて2つのdivを並べて表示できない場合、水平スクロールバーが表示されます。しかし、何が起こっているのは、divが最初のdivの下でクリアされているということです。

ウィンドウが小さすぎてもdivが停止せず、最初のdivと同じ行に残り、水平スクロールバーが表示されるようにするにはどうすればよいですか？ここで

は私のhtmlです：

<div class="col-container"> 
    <div class="col col-1"> 
    Content 1 
    </div> 
    <div class="col col-2"> 
    Content 2 
    </div> 
    <div class="col col-3"> 
    </div> 
</div> 

、ここでは私のCSSです：

.col-container{ 
    overflow: hidden; 
} 

.col { 

    float: left; 
} 
.col-1{ 
    width: 30%; 
    margin-right: 30px; 
} 

.col-2{ 
    background-color: blue; 
} 

とhereは、このHTMLとCSSとフィドルです。

Answer 1

2-colsのは、あなたが自分のコンテナに最小幅を設定する必要がありますクリアしていないことを確認する：
https://jsfiddle.net/3s963o9o/2/

別：

ここ

.col-container{ 
    overflow: hidden; 
    min-width: 150px; 
} 

は、上記のアップデートであなたのjsfiddleですオプションはfloatを使用するのではなく、flexboxに構造を変更することです。そのため

Answer 2

使用flexbox代わり

.col-container { 
 
    display: flex 
 
} 
 
.col { 
 
    flex: 1; 
 
} 
 
.col-1 { 
 
    flex: 0 30%; 
 
    margin-right: 30px; 
 
    background: red; 
 
} 
 
.col-2 { 
 
    background-color: blue; 
 
}

<div class="col-container"> 
 
    <div class="col col-1"> 
 
    Content 1 
 
    </div> 
 
    <div class="col col-2"> 
 
    Content 2 
 
    </div> 
 
    <div class="col col-3"> 
 
    </div> 
 
</div>