flexbox with images not viewing correctly in safari

Question

I have a problem with flexbox in Safari and I can't find a solution on these pages that works for me.

On my page I have used flexbox and have placed text in one column and a picture in the other. It views perfectly in Chrome and Internet explorer, however in Safari the image is shrunk and becomes very small or misplaced.

the CSS code:

.flexbox {      
  display: -webkit-flex; /* Safari */
    -webkit-align-items: center;  /* safari */ 
  -webkit-justify-content: center; /* safari */
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
}
.flexbox .col {
  flex: 1; 
  padding: 20px;
}
.flexbox .col:nth-child(1) { 
  /* background: #ccc;  */
  -webkit-order: 1; 
      -ms-flex-order: 1; 
          order: 1;
}
.flexbox .col:nth-child(2) { 
  /* background: #eee; */
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.flexbox .col:nth-child(3) { 
  /* background: #eee; */
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

HTML:

<div class="flexbox">
  <div class="col">
  <img src="image url">
  </div>
  <div class="col">
    contents of column 2 
  </div>
</div>

I have tried to add flexbox-shrink: 0; and flex: 1 0 auto; to .flexbox and .col respectively in the CSS but with no effect other than also causing problems in chrome.

I have made a codepen here: http://codepen.io/anon/pen/meWZgW. Open it in chrome/firefox or similar and then in safari to see the problem.

Would really appreciate some input here, I just can't figure it out!

thanks!

Answer 1

Revised Answer

First, try prefixing all your code so it's compatible with Safari. (If that doesn't work, consider my original answer below.)

You may be needing a -webkit prefix for this rule:

.flexbox .col {
    flex: 1; 
    padding: 20px;
}

Try this instead:

.flexbox .col {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1; 
   padding: 20px;
}

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For flexbox browser support data see here: http://caniuse.com/#search=flex

---

Original Answer

Flexbox is relatively new to CSS and different browsers may interpret flex properties differently (see here and here and here).

The main issue with your code in Safari is the size of the image and the overflow: hidden you have applied in the flexbox class.

Yes, Chrome and IE distribute space evenly and display both the text and the image in one view.

However, Safari is distributing the space differently, causing the image to be clipped and hidden by the overflow: hidden rule.

One way to address this issue is to change overflow: hidden to overflow: auto. http://codepen.io/anon/pen/RWVgER

Another option would be to adjust the height and width of your image. Currently, it's rendering its natural dimensions. But by adjusting the size in either the HTML, with height and width attributes, or the CSS, with height and width properties, it may fit better.

Also, keep in mind that when you create a flexbox, the children (but not other descendants) become flex items. So unless you need it, remove the div wrapping the image.

Consider changing this:

<div class="col">
    <img src=" https://i.guim.co.uk/img/...">
</div>

To just this:

<img class="col" src="https://i.guim.co.uk/img/..." height="" width="" alt ="">

One benefit of removing this div is that you can then apply flex properties directly to the img (without having to make the div a nested flex container).

The second div class="col" wrapping the text can remain as-is.

So your adjusted HTML would look like this:

<div class="flexbox">
    <img class="col" src="https://i.guim.co.uk/img/..." height="" width="" alt ="">
    <div class="col">contents of column 2 contents of column 2... </div>
</div>

Answer 2

I was having the same issue. Adjusting the height of image made it fix. In my case I set height to 150px.