DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Jaga santagostino
Jaga santagostino

Posted on • Originally published at jagascript.com on

fix chrome flexbox layouts in chrome 72, 73+

Chrome 72 introduced a change in how flexbox element with height: 100% renders, that caused some strange product breakage from one day to another without any code change.

chrome-before-fix

The fix was simple but hard to find.flexbox elements with height: 100% now need to have min-height set, even 0 value is ok.

.list {
  display: flex;
}

.item {
  height: 100%;
  min-height: 0; /* add this */
}

chrome-after-fix

more info: https://developers.google.com/web/updates/2019/01/devtools

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: