[Answered ]-Css horizontal overflow within a div

by

1👍

✅

Flexbox is neat, but browser support for it is still a little spotty. Fortunately, there’s an easier/more well-supported way to handle this. You can get the effect you’re after by adding white-space:nowrap; to your wrapper, and don’t limit its width – that property will prevent the matches from breaking onto a new line, no matter how many there are. You’ll only want to limit the width on the panel, not the wrapper.

Here’s a fiddle.

👤jack

1👍

You could solve this problem by making panel a flexbox.

/* Flexbox-related values */

.panel {
        display:flex;
        flex-direction:row;    
}

.panel .match {
   flex-grow:0;
   flex-shrink:0;
}

http://jsfiddle.net/6LLbsyjv/2/

I included the big box to confirm that the items were kept at the desired width of 300 pixels. If you remove flex-shrink:0 then the items will be automatically resized to be smaller, which is not what you want.

👤Andrew Shepherd

Leave a comment