[Webkit-unassigned] [Bug 259437] New: "flex: 0 1 auto" seems to have no effect

[bugzilla-daemon at webkit.org]

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

            Bug ID: 259437
           Summary: "flex: 0 1 auto" seems to have no effect
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Intel)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkit at willfaught.com

Created attachment 467094

  --> https://bugs.webkit.org/attachment.cgi?id=467094&action=review

safari screenshot

In this tutorial: https://blog.logrocket.com/responsive-image-gallery-css-flexbox/

In this section: Maintaining image aspect ratios in a responsive image gallery

It shows using an HTML structure like this:

```html
<div class="container">
  <!-- heading text -->
  <ul class="image-gallery">
    <li>
      <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
      <div class="overlay"><span>Image title</span></div>
    </li>
    <!-- other items here -->
  </ul>
</div>
```

With CSS like this:

```css
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-gallery > li {
  height: 300px;
  cursor: pointer;
  position: relative;
  flex: 1 1 auto;
}

.image-gallery li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 5px;
}
```

You can view a live demo here: https://sts6l7.csb.app/

In Chrome, it displays as intended, and as shown on https://blog.logrocket.com/responsive-image-gallery-css-flexbox/

In desktop Safari, it displays very differently, like the attachment, where each image stretches the full width of the container, with the images stacked vertically.

-- 
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/20230724/da76ffb2/attachment.htm>