How do I make my flex item (article
in this example), which has flex-grow: 1;
not to overflow it\'s flex parent/container (main<
max-width
works for me.
aside {
flex: 0 1 200px;
max-width: 200px;
}
Variables of CSS pre-processors allows to avoid hard-coding.
aside {
$WIDTH: 200px;
flex: 0 1 $WIDTH;
max-width: $WIDTH;
}
overflow: hidden
also works, but I lately I try do not use it because it hides the elements as popups and dropdowns.