Two elements of the built-in block - there is no flow when resizing

Question

I am looking for a better way to have multiple columns using an inline block. Everything works fine, except when the browser size changes. The second column will be placed under the first column, as you would expect with the built-in block. I understand why this is happening, I need to know if there is a way to make a horizontal scroll instead of pushing the second column down. I thought the overflow: hidden would work, but that doesn't seem to be the case.

I am not setting a single width right now and would like to keep it as fluid as possible.

<div>
    <div id="col1"></div>
    <div id="col2"></div>
</div>

col1 and col2 are inline blocks with no width set, and they are displayed side by side when the browser view is large enough. When the browser size is smaller than the size, col2 is displayed under col1. I want them to always be side by side and have horizontal scrolling, if necessary.

Answer 1

Add white-space: nowrapc to the parent element display: inline-block.

Answer 2

<div style="width:500px">   // <=== try to make fix width
    <div id="col1"></div>
    <div id="col2"></div>
</div>

or try

<div style="min-width:500px">   // <=== try to make fix width
    <div id="col1"></div>
    <div id="col2"></div>
</div>

Answer 3

min-width div. , , , .