Flexbox Div not containing all elements in Safari, but works fine in Chrome

Question

I am running into a bug with how Safari is handling some flexbox elements. In Chrome, all elements are contained within the DIV and are handled properly. In Safari, the only thing inside the DIV is the SVG, and the remaining two elements are forced out and start exactly where the margin ends for the DIV.

I even tried to swap the SVG out with a PNG and it doesnt seem to be that. Its hard trying to figure out what could be causing it, when non of the code in the dev tools is really triggering it to even be closer to what it is supposed to be. There is no extra padding, and even when clearing the media queries, it still is messed up. I have a script that adds all of the prefixes to the CSS when building the SASS, and when I took that out, it still does the exact same behavior.

Is there something in Safari to handle flexed DIVs differently than Chrome that I might not have learned on my own? Any help is appreciated. Thank you. I tried setting the flex shrink and grow, adding different position or display settings, and even trying other elements in the DIV.

Here is an image of the DIV in Chrome being nice and contained.

And here it is in Safari with the two elements outside.

Here is a link to the live site link

Here is a link to the code github

And here is the code for that specific DIV and its elements.

.miirhelp {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 margin-bottom: 8rem;


 &__box {
  height: 21rem;
  width: 21rem;
  margin: 5rem; 

  display: flex;
  flex-direction: column;
  align-items: center;

  &-logo {
   max-height: 100%;
   max-width: 100%;
  }

  &-text {
   font-size: 1.5rem;
   font-weight: 700;
  }

  &-btn {
   background-color: #fff;
   color: var(--color-grey-dark-1);
   margin-top: 1rem;
   margin-left: 1rem;
   border: none;
   font-size: 1.2rem;
   cursor: pointer;
   text-decoration: none;
  }

  @media screen and (max-width: 1244px) {
   margin: 1rem;
  }

  @media screen and (max-width: 950px) {
   margin: 0rem 0rem;
  }
  @media screen and (max-width: 850px) {
   margin: 0rem 4rem;
  }
  @media screen and (min-width: 1200px) {
   height: 23rem;
   width: 23rem;
   margin: 3rem;
  }
  @media screen and (min-width: 1600px) {
   height: 30rem;
   width: 30rem;
  }
 }
}

The issue is probably nested flex boxes - safari really doesn't like them, I also founf if I put a class on all of my columns, they wouldn't have an equal height - I was only allowed to put a class on the tallest column if I wanted the other columns to equalise in height! (I wrote a really dirty js hack for safari users) — Pete, Jan 12 '18 at 16:51

Michael Benjamin · Answer 1 · 2018-01-12T17:42:40.917

An initial setting on flex items, according to the flexbox specification, should be flex-shrink: 1. This means that flex items are permitted to shrink in order to avoid overflowing the container.

Chrome appears to be adhering to this guideline.

Maybe Safari has the default set to flex-shrink: 0? This would allow items to overflow the container when there isn't enough space.

So add flex-shrink: 1 to the child items of .selfhelp__box.

If that doesn't work, add min-height: 0 to the child items of .selfhelp__box.

Here's the explanation: Why don't flex items shrink past content size?

If that doesn't work, here are a few more troubleshooting ideas: Flexbox code working on all browsers except Safari. Why?

Hopefully, one of those solutions works. I don't have access to a Safari browser right now, so I can't be more precise.

score 1 · Answer 2 · answered Jan 12 '18 at 18:20

As stupid as this sounds, the only solution I have that works is settings a specific height for the SVG at every breakpoint. I just went into Chrome, find the height of it at every break point, and then manually made sure it was hard coded to those heights. Safari clearly has an issue with scaling and handling flexbox as a whole.

Thank you so much for the help and I hope this post helps others having the same stupid issue.

Flexbox Div not containing all elements in Safari, but works fine in Chrome

2 Answers2