CODEWITHSUNDEEP
csslayoutflexbox
skålfyfan
skålfyfan

Reputation: 5281

Why do flex-item images not scale height?

I'm learning Flexbox layout right now after having to take over a project after someone abandoned it and have run into a bug where flex-item images don't seem to scale their height at all w/ responsive design. Width scales fine, but the height never scales and remains fixed at original height.

I have a very simple set up of something like:

<div class="my-container">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</div>

CSS is very basic:

.my-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.my-container img {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 100%;
}

Basically, a single column (the mobile view - iphone). The above works and looks great in Firefox. On Chrome (v 48.0) the image height is NOT scaling.

E.g. the 1st <img> is a 940px x 500px wide image which looks great on Desktop, but in Chrome it is 300px x 500px. Width is scaling but height is not? The 2nd and 3rd images ~460px and appear on a row next to each other.

Oddly, if I make flex-direction: row, then Chrome renders correctly and the image height appears to scale, but Firefox then breaks and has the same issue!

Am I out to lunch here?

Thankfully, everything RENDERS OKAY on mobile devices. This only seems to occur when resizing your browser window. :/

Upvotes: 1

Views: 3524

Answers (2)

Mike T
Mike T

Reputation: 1296

I believe this is a bug with the most recent production chrome (48). Does running this in console "resolve" your issue (assuming you have jquery running): $('img').css('min-height',0);

If so (or alternatively) you should be able to give your images a min-height of 0 in css. That should do the trick as a workaround until it's fixed.

Found this on: https://github.com/angular/material/issues/6841

Chrome is a great browser, but occasionally the flex-box support breaks with updates =/

Upvotes: 3

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

Is this the desired output?

.container {
  width: 600px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
<div class="container">
  <div><img src="https://placehold.it/150x150/E8117F/FFFFFF"></div>
  <div><img src="https://placehold.it/100x100/11E87F/000000"></div>
  <div><img src="https://placehold.it/200x300/117FE8/FFFFFF"></div>
</div>

Upvotes: 0

Related Questions