Warum ist div clearing?

Question

Ich habe zwei divs mit einem Schwimmer: linke Eigenschaft und etwas Breite zu ihnen. Sie sind in einen Behälter eingewickelt, der einen Überlauf hat: versteckte Eigenschaft.

Wenn ich die Größe meines Browsers in horizontaler Richtung verkleinere, möchte ich eine horizontale Bildlaufleiste erscheinen, wenn die Breite des Fensters zu schmal ist, um die zwei divs nebeneinander anzuzeigen. Aber was passiert, ist, dass das Div unter dem ersten Div verschwindet.

Wie kann ich es so machen, dass der div nicht nach unten gehen, wenn das Fenster zu klein ist, und stattdessen werde in der gleichen Zeile wie die erste div und eine horizontale Bildlaufleiste erscheint immer bleiben?

Hier ist mein 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> 

und hier ist meine CSS:

.col-container{ 
    overflow: hidden; 
} 

.col { 

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

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

und here ist eine Geige mit diesem HTML und CSS.

Answer 1

Um die Zwei-cols nicht deaktivieren Sie sicherstellen, dass ein Mindestbreite auf ihre Behälter einstellen:

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

Hier Ihre jsfiddle mit dem obigen Update:
https://jsfiddle.net/3s963o9o/2/

Ein weiterer Option ist nicht float zu verwenden, sondern die Struktur zu flexbox zu ändern.

Answer 2

Verwendung flexbox dafür statt

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