Layout bug with nested grid inside flex

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Tomas Carnecky]

https://dor1x.csb.app

The image should be aligned to the top left of the viewbox, but is shifted slightly down in Safari 14 / Safari technology preview. Works in Chrome and Firefox..

Curiously, when I highlight the .box element in the devtools, the highlight shows up in the correct location. But the element appears to be actually rendered in a different place.

---

<style>
  img {
    display: block;
    width: 100%;
    flex-grow: 1;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .box {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    max-width: 20rem;
  }
</style>

<div class="container">
  <div class="box">
    <img src="https://media.giphy.com/media/hR6Q01jCXOr31wctJw/giphy.gif" />
  </div>
</div>

[Radar WebKit Bug Importer]

<rdar://problem/79056985>

[Eleni Maria Stea]

This is not a safari-specific bug, I can reproduce it in GTK port using mini-browser.

[Manuel Rego Casasnovas]

This looks like a flexbox or grid layout issue, so not platform specific at all.

[Viktor Chernodub]

For some reason, the grid container calculates its height based on the page height. So the content is at the center of the page, rather than at the center of the parent container. Here's a more concise example:

---

<div class="flex">
  <div class="grid">Content</div>
</div>

<style>
  .flex {
    display: flex;
    flex-direction: column;
  }

  .grid {
    background: yellow;

    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
</style>

[Yehonatan Daniv]

We have another case that could be related (same?).
See example: https://jsbin.com/henosigusa/1/edit?html,css,output

It's a structure of: flex > grid > flex.
with a min-height on the outer flex.

------

<div class="flex min-height">
  <div class="grid">
    <div class="flex">
      <div class="content">Hello1</div>
      <div class="content">Hello2</div>
      <div class="content">Hello3</div>
      <div class="content">Hello4</div>
    </div>
  </div>
</div>

<style>

.grid {
  display: grid;
}

.flex {
  display: flex;
  flex-direction: column;
}

.flex > * {
  flex-grow: 1;
}

.min-height {
  min-height: 90px;
}

</style>

------

It appears that the min-height is affecting the content, and if the height of the content can't be contained inside the container, the min-height is applied to the .content items inside the inner flex.
Seems to be WebKit only.

[Ahmad Saleem]

https://jsbin.com/henosigusa/1/edit?html,css,output <- works in Safari Technology Preview 198 while fails in Safari 17.6 Beta.

Same is the case with - https://dor1x.csb.app/.

Marking this as 'RESOLVED CONFIGURATION CHANGED'.

[zalan]

progressed at https://commits.webkit.org/276880@main

*** This bug has been marked as a duplicate of bug 271843 ***