Bug 260499 – mpr.makedeb.org - nested flex with height 100% inside a display: grid is very tall

• Component: Layout and Rendering
• Status: NEW

[Karl Dubost]

This was initially reported on https://github.com/webcompat/web-bugs/issues/124825

Steps to reproduce:
1. With STP 177 on macOS
2. Go to https://mpr.makedeb.org/

Expected:
logo and navbar at the top

Actual:
logo and navbar are overlapping content in the middle of the page.

I need to reduce to make a test case.

A quick solution for the site to fix it is to remove the "height: 100%"

```
/* style.css | https://mpr.makedeb.org/static/css/style.css */

header .makedeb-brand {
  /* height: 100%; */
}
```

But still there is a difference of behavior here for Safari compared to Chrome and Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/114228144>

[Karl Dubost]

Created attachment 467377 [details]
simplified testcase

This is kind of minimal.
Maybe there are a couple of things more to reduce.

[Karl Dubost]

Created attachment 467378 [details]
rendering in Safari, firefox, chrome

Rendering in 

Safari Technology Preview  177           19617.1.4.3
Firefox Nightly            118.0a1       11823.8.19
Google Chrome Canary       118.0.5962.0  5962.0