Why is div clearing? - html

Question

I have two divs with a float:left property and some width to them. They are wrapped in a container which has an overflow: hidden property.
When I change the size of my browser to be smaller in the horizontal direction I want a horizontal scroll bar to appear when the width of the window is too narrow for to display the two divs side by side. But what is happening is that the div is clearing down underneath the first div.
How can I make it so that the div does not go down when the window is too small and instead will always stay in the same row as the first div and a horizontal scroll bar will appear?
Here is my 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>
and here is my css:
.col-container{
overflow: hidden;
}
.col {
float: left;
}
.col-1{
width: 30%;
margin-right: 30px;
}
.col-2{
background-color: blue;
}
and here is a fiddle with this html and css.

Answer 1

To make sure the two-cols don't clear you must set a minimum-width to their container:
.col-container{
overflow: hidden;
min-width: 150px;
}
Here is your jsfiddle with the above update:
https://jsfiddle.net/3s963o9o/2/
Another option is not to use float, but to change the structure to flexbox.

Answer 2

use flexbox for that instead
.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>