0

My whole page is in flex, most of the elements are positioned with flex (rather than height: 100% I tend to use flex: 1). Later I wanted to introduce grid in more complicated component, and that grid will consist of two rows of given ratio (1:2).

This is the result I expected (and it is screenshot from Chrome), where pink and red boxes are in 1:2 ratio: screenshot from Chrome

And this is the result that Safari is producing:

enter image description here

I am quite speechless.

https://codesandbox.io/s/charming-bird-n112l?file=/index.html

Łukasz Szcześniak
  • 1,417
  • 11
  • 23
  • For Safari, make sure to define heights on all parent elements, where the child has a percentage height. Otherwise, the percentage height on the child will be ignored. In this case, `.grid-element { height: 100% }` is failing (defaulting to `auto`). – Michael Benjamin May 28 '20 at 23:39
  • 1
    See my answers in the duplicates for complete explanations. Most modern browsers have evolved past this requirement. Safari lags behind. – Michael Benjamin May 28 '20 at 23:39
  • 2
    @MichaelBenjamin I hate Safari, it could be such an elegant solution without this browser. – Łukasz Szcześniak May 29 '20 at 07:41
  • Yeah, but in all fairness, Safari is the only browser that is adhering strictly to the language in the spec. The other browsers, although their approach is more useful, still present more risk, as they've gone off on their own and can change the rules anytime. – Michael Benjamin May 29 '20 at 11:52

0 Answers0