[Webkit-unassigned] [Bug 226522] Layout bug with nested grid inside flex

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=226522

Yehonatan Daniv <maggotfish at gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |maggotfish at gmail.com

--- Comment #5 from Yehonatan Daniv <maggotfish at gmail.com> ---
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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230926/632bab80/attachment.htm>