Firefox flexbox image width

Question

I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?

Note: The image should never be larger than it's original size.

Chrome:

enter image description here

Firefox:

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

dholbert · Accepted Answer · 2015-02-26T23:23:33.673

You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).

Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.

(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)

Snippet with that fixed:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.container {
  width:300px;
}
.flexbox {
  display:flex;
}

.flexbox .column {
  flex:1;
  background-color: red;
}

.flexbox .middleColumn {
  flex:3;
  min-width:0;
}

.flexbox .middleColumn img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  align-self: center;
  display: block;
}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flexbox">
        <div class="column">This is the left column!</div>
        <div class="middleColumn">
          <img src="http://placehold.it/400/333333">
        </div>
        <div class="column">This is the right column!</div>
      </div>
    </div>
  </body>
</html>

Thank you! `min-width: 0;` solved my problem. Firefox applied `min-width: -moz-min-content` and Chrome applied `min-width: auto`. — Fabian Marz, Nov 27 '15 at 16:18

score 3 · Answer 2 · answered Feb 25 '15 at 22:08

3

I have to admit that I'm not sure why, but for some reason in Firefox it looks like you have to give the image a width/height (i.e. something other than "auto"). Our old friend 100% seems to do the trick:

.flexbox .middleColumn img {
    width: 100%;
    height: 100%;
    display: block;
}

Here's a fiddle showing the working solution. Note that I changed the side columns to flex:2 to make the result a bit more apparent.

answered Feb 25 '15 at 22:08

gerrod

6,119
6
33
45

Thanks but I already knew this, I'll update the question to be more specific that if the image should never be bigger than it's original dimensions. – Drew Freyling Feb 25 '15 at 22:17
3

My issue isn't exactly the same, but this prompted me to try `width` on the image instead of `min-width`, which fixed my problem. – DawnPaladin Jun 12 '15 at 21:10
This won't work when an image is not as wide as its container, when that container is a flex item. The image will stretch to the full width of the container. – Chris Jun 30 '15 at 14:19
This also fixed my issue, but as mentioned by @DawnPaladin it was an issue with `max-width: 100%` which wasn't applying correctly. `width: 100%` was the fix. The `height` and `display` in the answer were unnecessary, fixing the classic vertical space on images generally remedied with `vertical-align: middle`. – joeyhoer Jul 01 '15 at 19:33

score 0 · Answer 3 · answered Jan 15 '16 at 08:26

I seem to get this working with the following:

.flexbox {
  display:flex;
}
.flexbox .column {
  flex:1 1 0;
  overflow:hidden;
  background-color: red;
}

.flexbox .middleColumn {
  flex-grow:3;
  flex-shrink:3;
}

.flexbox .middleColumn img {
  max-width:100%;
}

setting flex:1 1 0; on all columns sets them to equally grow and do so from the even and miniscule basis of 0px.

You then overide the grow and shrink on .middleColumn

max-width:100%; is needed as per usual

the magic seems to be overflow:hidden; on the item getting flexed.

the other stuff on the image is not needed.

score 0 · Answer 4 · answered Mar 17 '16 at 13:31

In my experience, the approach is slightly different, maybe strange, but it works. Basically, I fix the max width to the real image width, so it won't pixelate, and use percentage width instead of max-width. If you have, say an <ul> (flex) container, the cells will be:

li{
   flex-grow: 0;
   flex-shrink: 1;
   flex-basis: auto;
   width: 50%; // for example..

   img{
     display: block;
     max-width: [your real img width in px] // instead of 100%;
     width:100%; // instead of max-width
   }
}

Firefox flexbox image width

4 Answers4

Linked

Related