CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-10flexbox
Matt
Matt

Reputation: 2611

Flex items exceed width of parent in IE

I have a ul > li > a > img parenthesis and am using flexbox to align all list items on to a single row whilst the images are maintaining their aspect ratio's.

What it looks like in Chrome 45, Firefox 40, Safari 8, Opera 28 & Edge

enter image description here

What it looks like in IE 10/11 enter image description here

So my problem is that i'm trying to achieve in IE the same behaviour as i have in Chrome and Firefox.

My SASS/SCSS

ul.images {
  float: left;
  clear: both;
  width: 100%;
  min-height: auto; // Required for Firefox
  padding: 0;
  margin: 0;
  border: 1px solid yellow;

  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;

  li {
    border: 2px solid green;
    flex: 1 1 auto;
    width: auto;
    min-width: 0; // Required by Firefox
    max-width: 100%;
    max-height: auto;

    img {
      float: left; // Removes phantom margin
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100px;
    }
  }
}

Here is a CodePen for anyone wanting a more detailed look.

Upvotes: 16

Views: 7395

Answers (4)

Willy Werlang
Willy Werlang

Reputation: 75

I got the same issue, and found this fix, just add this to your style sheet:

*{
min-height: 0;
min-width: 0;
}

Upvotes: 0

Rene van der Lende
Rene van der Lende

Reputation: 5281

Easiest solution: add 'overflow: hidden' to class '.images'

At commenters:

True, guys, missed that one, sorry. @mathijs, technically true, but CSS is full of hacks (needs to be). Consider the clearfix hack, for example, which seems to be commongood nowadays.

But in this case, where the main container has a max width of 500px, hiding the overflow seems the best choice when the sum of the scaled image widths does not fit in the image container. It's a bit of an either/or situation.

BTW: Chrome is less close to W3C specs than FF (DE 42+), I'd opt to start using FF for your initial testing and then test it in Ch to detect quirks. I bet Ch hides the overflow internally.

@Matt, I'd stick to the 'overflow: hidden' solution, in a larger project it's rather trivial and does the job.

I was wondering, do you really need ul/li ?? With a bit of redesiging the code it gets less complicated and condensed, have a look:

@Matt again: Apparently Ch cuts excessive element data when their container has a fixed width, like yours, while FF and IE expect you to tell them what to do with it (W3C). I have changed class 'rew-images' from 'overflow:hidden' to 'overflow-x: scroll; overflow-y: hidden', now you can see why you need to do something with overflow.

The source of your problem lies in the fact that you want the images nicely aligned AND have a proper scaling ratio (as I would too). But the sum of the resulting image widths is larger than 500px (minus margins etc.), so class 'images' gets overflowed. You simply can't put 600px in a container of 500px AND maintain the aspect ratio. You will have to do some cutting or remove the width constraint of the main container (remove width: 500px ). As I said before: either/or...

.rew-container {
  float: left;
  width: 500px;
  border: 2px solid black;
  padding: 15px
}
.rew-images {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid red;
  overflow-x: scroll; overflow-y: hidden
}
.rew-images img {
  min-width: 100%;
  max-width: 100%;
  width: auto;
  max-height: 100px
}
.rew-images a {
  flex: 1 1;
  border: 2px solid green;
  max-height: 100px;
}
<div class="rew-container">
  <div class="rew-images">
    <a href="http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg" title="armin_van_buuren_%282%29_798.jpg">
      <img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&amp;pid=15.1" alt="armin_van_buuren_%282%29_798.jpg" height="168" width="300">
    </a>
    <a href="http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg" title="Armin van Buuren – the best Dj’ in the world :X:X:X">
      <img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&amp;pid=15.1" alt="" height="480" width="444">
    </a>
    <a href="http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg" title="armin van buuren">
      <img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&amp;pid=15.1" alt="armin van buuren" height="360" width="480">
    </a>
    <a href="http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ...">
      <img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&amp;pid=15.1" alt="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..." height="315" width="480">
    </a>
  </div>
</div>

Upvotes: -1

romuleald
romuleald

Reputation: 1434

Change the <img> width from auto to 100%

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100px;
}

It seems that's Chrome who doesn't respect standard

Upvotes: 4

zenoh
zenoh

Reputation: 2183

Not sure if this is the way you want the problem to be solved, but I've added in

li{
  height: 100%
}

and few other things and it seems to be working here:

EDIT: updated the demo, the ratio seems to be fine now for Chrome and IE

http://jsfiddle.net/uf30wuwz/3/

Upvotes: 0

Related Questions