eshansingh1 eshansingh1 - 2 years ago 96
CSS Question

Allow flex items to keep fixed width and scroll horizontally inside container

I have a parent that's using

display: flex;
. It has four children (cards) currently, but it may have more. All the children need big, but equal, widths.
For example, each child needs a
width. If that happens, only a certain amount of children will fit on the screen. I need to be able to do that, and have the rest of the children be accessible with horizontal scrolling.

explanation image

How do I achieve this? I tried using
flex-wrap: no-wrap;
and then increasing the width of the children, but the parent doesn't allow that. This seems intentional, but I basically want to override this behaviour.


<div id="parent">
<div class="children">
<b class="text"">Text</b>


#parent {
display: flex;
flex-flow: row no-wrap;
align-content: flex-start;
justify-content: space-around;
background-color: blue;
height: 100%;

.children {
width: 50%;
height: 100%;

Answer Source

It looks like you're searching for the CSS overflow property.

Try adding overflow-x: auto to the container.

And make the children less flexible.

Instead of this:

width: 50%;

Try this:

flex: 0 0 50%; /* don't grow, don't shrink, stay fixed at 50% width */

The initial value of flex-shrink is 1, which means the flex item will shrink to avoid overflowing the container. With the code above we override the default with 0, which essentially turns off flex shrink.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download