Width ignored on flexbox items

My preferred way of dealing with this situation is to add:

flex-shrink: 0;

This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.

Another option, depending on the requirement is to use min-width, which is respected when using flex.


The answer from Adrift is perfect; but a change to make it more flex would be

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

And remove the width property entirely.

It would be the flex way to say that the element will have an invariable width of 200px

Tags:

Css

Width

Flexbox