CSS Flexbox is a great way to create fluid layouts (horizontal & vertical), but sometimes you don't want the Flex display property to filter down to all child elements. In this case you need to set the Flex to none on the child element you don't want to flex. The CSS is very simple:-
flex: none;
This is equivalent to flex: 0 0 auto; and that is shorthand for: -
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
And you could link this up with:-
display: block!important
An example for using this could be on a Google Map that has a flex parent. You want the Google Map as a display: block; with no flex so add the above to its container.
Join in the Discussion