Image Behavior Within Flexbox (Rows Embedded in Columns)

Image behavior within flexbox (rows embedded in columns)

Solution

replace:

.row {
    flex: 1;
    border: 1px solid black;
    display: flex;
    align-items: stretch;
}

with:

.row {
    flex: 1 1 0px;             /* adjustment on this line */
    border: 1px solid black;   /* no change */
    display: flex;             /* no change */
    align-items: stretch;      /* no change */
}

DEMO 1

---

Explanation

You wrote:

The question is why does the image in the second row of the middle
column of block 2 not shrink to the height of the row within which it
is contained?

It appears that you tested your code in Chrome only, because the premise of your question is false when it comes to Firefox and IE11.

In those browsers the image of the dog in block two is contained nicely within the flex item. The image is a bit stretched in IE, but it's contained nonetheless.

Your question appears to be Chrome-specific. (I didn't test in Safari, but that's a WebKit browser like Chrome, so the solution may be similar.)

Here's a demo of your original code in case you want to test across browsers:

DEMO 2

The solution to this problem is interesting because a small and seemingly insignificant difference in a property value makes a big difference in Chrome rendering.

---

Your image is a child element (more specifically: a flex item) of div.row, a flex container with row-direction.

div.row is also a flex item of a larger container (in column-direction) and has flex: 1 applied. The problem in Chrome is rooted in that flex: 1 declaration.

What does flex: 1 mean?

The flex property is shorthand for flex-grow, flex-shrink and flex-basis.

flex: 1 is the equivalent of flex-grow: 1, flex-shrink: 1 and flex-basis: 0%.

Notice that percentage sign (%) after the 0. It's defined in the flexbox spec's Common Values of flex and it actually makes a difference.

Try this in Chrome:

Replace flex: 1 in div.row with its equivalent flex: 1 1 0%. You'll notice that nothing changes when rendered.

Now remove the percentage sign and run it again. The image snaps into place.

Making it flex: 1 1 0px, like stated in CSS-Tricks, also works.

DEMO 3

So, using px or no unit – and not a percentage – on the 0 fixes the problem in Chrome... and it doesn't break anything in Firefox.

In IE11, however, px works but unitless does not. In fact, unitless obliterates the layout.

But IE11 is another story...

On the browser support data website caniuse.com, IE11 was showing full support for flexbox until recently, when it was downgraded to partial support due to the "large amount of bugs present". In testing the above demos, IE11 regularly rendered the same code differently on refresh. See the Known Issues tab on caniuse.com for a list of problems.

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. IE11, as mentioned above, offers partial support due to several known bugs. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

Images inside a display:flex item partially distorted or cut off

You probably need something like this:

HTML

<div class="scroll-slider-track">
  <div class="image-gallery">
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/l800/83/1083_af8cbfd999d37bbac86691e9c5ffb76f">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/84/1084_72a6840640a8650cc01f41d55346973c">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/85/1085_5f18260d83ea0790be5a8029b7638872">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/86/1086_66daf815df8570e11564f3426c074f3c">
    </div>
  </div>
</div>

SCSS

.scroll-slider-track {
  // do not set a height for this container
  // because the horizontal scroller also needs
  // space and this varies in every browser
  width: 800px; // set the width you need
  overflow: auto;
}

.image-gallery {
  height: 300px; // height of the gallery images, set one you like best
  display: flex;
  flex-flow: row nowrap;
}

.image-gallery-item {
  flex: 0 0 auto; // turn off shrink and grow behavior
  // needed, so the img element can calculate its height
  // using a  value in percent:
  height: 100%;

  &:not(:first-child) { // addressing all items except the first one
    margin-left: 1rem;
  }

  img {
    height: 100%;
    width: auto; // this will keep the image ratio intact
    flex: 0 0 auto; // turn off shrink and grow behavior
    display: block; // making sure, no whitespace or line-height issues occur
  }
}

Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?

img {max-width:100%;} is one way of doing this. Just add it to your CSS code.

http://jsfiddle.net/89dtxt6s/

Multi-column flexbox layout rendering as single line in IE11

It's a silly quirk in IE11.

Instead of:

flex: 1 1 0;

Use:

flex: 1 1 0px;

IE11 doesn't play nice with a unitless flex-basis.

I stumbled upon this when researching this answer: https://stackoverflow.com/a/34014580/3597276

Image stretching in flexbox in Safari

It certainly appears to be a bug.

The default setting for the align-items property is stretch. Most major browsers handle this sensibly, stretching the image within the confines of the container.

For whatever reason, Safari stretches the image to its natural height, taking the container along for the ride.

---

flex-direction: row

To fix the problem, override the stretch default value with flex-start in the align-items property.

.container {  display: flex;  flex-direction: column;}.container section:first-child {  display: flex;  align-items: flex-start; /* new */  margin-bottom: 25px;}.container img {  width: 125px;  height: auto;}

<div class="container">  <section>    <img src="http://i.imgur.com/60PVLis.png">  </section>  <section>    <img src="http://i.imgur.com/60PVLis.png">  </section></div>

Flex container won't expand to fit content in IE

IE11 has lots of problems with flexbox. It certainly doesn't work well with flex: 1.

In your code, you have:

#place_results_wrap {
    flex: 1;
    min-height: 6.25em;
}

The flex shorthand computes to:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0% (in Chrome) and flex-basis: 0px (in IE11)

These flex-basis values fail in IE11.

Instead of flex: 1, try using flex-basis: auto.

Microsoft Edge browser breaks nested flex children

The solution to this problem is actually quite simple. The explanation, however, not so much.

---

Solution

Don't use unitless values on flex-basis. It breaks flex layouts in Microsoft browsers (IE and Edge).

Instead of this, which you have in your code:

.box > * {
  flex-basis: 0;
}

Use this:

.box > * {
  flex-basis: 0%;
}

That solves the problem.

.box {  display: flex;  flex-wrap: wrap;}
.box>* {  flex-basis: 0%;  /* adjustment */  flex-grow: 1;  max-width: 100%;}
.box>.concise {  flex-basis: auto;  flex-grow: 0;}
section {  background-color: white;  border: 1px solid black;}

<div class="box">  <section class="box concise">    <div class="box">      this is just for test    </div>  </section></div>

---

Related Topics