Bug 172234 – Chrome and Firefox vs Safari. Flexbox and CSSGrid strange affair.

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 310419 [details]
First and second screen. Chrome and Safari.

I have this situation: https://jsfiddle.net/johnsam/rdtva2fq/

On **Chrome** it works good, see the first image.

It start (see "FIRST" and "LAST" btn). Good.

On **Safari** it doesn't (also with iPad/iPhone, it's the same) see the second image.

"FIRST" btn OK, "LAST" one nope. The page has a scrollbar that is what I don't want!

**If I remove the header part it works good, so my guess is Safari doesn't recognize the (`height: 100vh` MINUS the header part of that height) maybe.
I'm right?**

Code:

    <div class="my-all d-flex flex-column height100">
      <div class="container-fluid" style="background: red;">
        <div class="row">
          <div class="col-12 my-5">
            Test space long long long
          </div>
        </div>
      </div>
      <div class="my-main d-flex height100" style="background: cyan;">
        <div class="container-fluid d-flex media-body">
          <div class="row my-row my-3">
            <div class="col-6 my-grid">
              <a class="btn btn-secondary my-btn">
                <span>FIRST</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

  [1]: https://i.stack.imgur.com/77Sz0.png
  [2]: https://i.stack.imgur.com/dCCNN.png

Question on StackOverflow: http://stackoverflow.com/questions/44025290/flexbox-strange-behaviour-with-cssgrid

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.

[Radar WebKit Bug Importer]

<rdar://problem/97084359>