Images not taking 100% width of parent when using -webkit-box-flex?

Hi,

I am building a site using flexbox, and its working fine in most browsers, except I have some issues in iOS6 with images inside flexboxes.

For iOS6 I am using this:

-webkit-box and -webkit-box-flex

For example I have this code:

<div class="container">
  <div class="block">
     <img />
  </div>
  <div class="block">
     <img />
  </div>
  <div class="block">
     <img />
  </div>
</div>
.container{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.block{
  display: -webkit-box-flex;
  display: -webkit-flex;
  display: -moz-box-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

img{
  display: block;
  width: 100%;
  max-width: 100%;
}

In all browsers except chrome and safari in iOS6 (havnt tried firefox) the image takes 100% width of its parent. But in iOS6 the image takes 100% width of the body or viewport. I don’t know how to fix this, anyone have any ideas?

I guess the images are having trouble getting the width of their parents when the parent shave -webkit-box-flex or -webkit-box …

Hi,

I’m not seeing any difference with the code you have posted above.

ios6 does only have partial support for flexbox although I’m not familiar with all the old prefixes and their implications (and indeed flexbox itself still mystifies me as I only use it when testing and then a week later forget how it works). :slight_smile:

What is it that you need to do that requires flexbox and what exact differences are you seeing?

Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version. {source: MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes }

So you should probably not expect to get the same rendering in Safari; though Chrome is a mystery unless you are also using an older version because they change the way it worked several times trying to get the us out.