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?

It should generally only affect that element and its children, but it's hard to say without seeing something. — isherwood, Jun 21 '19 at 16:29
Would my reply "Just wrap that specific area in an ID and overide the current flex rules" make sense? Please provide code and some examples. If you have not tried some possible solutions yet - try them and come back to your post with some failed outcomes. — Liam Geary, Jun 21 '19 at 16:30

score 0 · Answer 1 · answered Jun 21 '19 at 16:49

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

CSS display flex side effects

1 Answers1