DrTchocky DrTchocky - 9 months ago 49
CSS Question

overflow-x stacks divs on window resize

I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:


As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.


overflow-x: hidden

Stop the .column class from being displayed when they run off the side of .container?


Add white-space: no-wrap the .container


.container {
    max-height: 600px;
    width: 100%;
    margin-top: 100px;
    background: red;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;