CSS display flex side effects

Question

I have an existing page on which I am trying to add display:flex, flex-flow: column & height:99% to the container and adding flex:1 for the child items.

My question is since it is an existing page, I do not want to really touch any of the other styling on the page (mostly they have properties like overflow, margin/padding, etc)

Can there be any side effects that I should watch out for after making the container to display: flex?

Answer 1

Here are two potential side effects to consider:

• Margin collapsing, which is a feature in a block formatting context , doesn't exist in a flex formatting context . See: Margin collapsing in flexbox

• Since you plan to set a percentage height ( height: 99% ) on the container, make sure the parent has a defined height. See: Working with the CSS height property and percentage values