inline-block scrollbars when browser resized - html

Question

Here is my css:
.contain
{
min-width: 300px;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
Clearly the two divs display inline, which is what I want.
However, when the browser is resized smaller the divs are displayed one above the other (desired behaviour), but once I make the browser window smaller than min-width, I need to have horizontal scrollbars displayed. This is not happening.
Any help as to why?
Edited: I tried the suggestions here, but they all seem to break the desired behaviour of the divs stacking on top of each other when the browser is sized smaller.
The effect I am after:
display the divs inline (with no scrollbars) in a browser that is wide enough; but in a "narrow" browser (ie mobile) display the divs one on top of another and THEN add horizontal scrolling ONCE the min-width can no longer be displayed for each div.
I think that's a little clearer...

Answer 1

You just need to have a wrapper for the divs and set it with
.wrapper{
min-width: 100%;
white-space: nowrap;
}
Here is the Fiddle: https://jsfiddle.net/1hshzxah/3/

Answer 2

Your outside boxes have the same minimum width as your inside ones, so both will be at least 300px wide, so no scrollbars appear. Because of the defined pixelwidth of your outer elements, your they will not stack next to each other if you do not have 600 pixels to play with or more. If you give your outer boxes a width that can scale (by using % or vw) with the page width, your result magically appears:
.contain {
width: 45%;
background: black;
height: 200px;
display: inline-block;
overflow: auto;
}
.inl1{
/* margin: 5px 5px 5px 5px; */
min-width: 300px;
background: blue;
width: 400px;
height: 200px;
}
#media all and (max-width:600px){
.contain {
width: 100%;
}
}
<div class=contain>
<div class=inl1></div>
</div>
<div class=contain>
<div class=inl1></div>
</div>
(I use 45% because I did not want to bother with floating these nicely next to each other, but you could with some more CSS). You can still add a max-width of 300 pixels to your containers to make sure they don't grow beyond 300px, but still shrink otherwise.