JagaScript

fix chrome flexbox layouts in chrome 72, 73+

April 10, 2019 | 1 min read
tags: [tips, chrome]

Chrome 72 introduced a change in how flexbox elements 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


Jaga Santagostino

Blog by Jaga Santagostino.
Software consultant, polyglot developer, maker of things, lifelong learner.