Scale Image Height to Flex-Grown Wrapper

Question

I'm doing some flex-grid and having problems getting inline images to scale their dimensions to match the height of a flex-grown box.

I have a flexbox column where I have a title and a wrapper that will grow to whatever space is leftover. Inside the wrapper is list of images that I would like to all have the same height and be inline. No matter what I do the images end up to the right of the title and outside the dimensions of the flexbox. Any help would be appreciated. Bad drawing included on what I would like vs what I currently get

Link to fiddle: https://jsfiddle.net/oan5fmtb/1/

<div class="container">
  <h4>Title</h4>
  <div class="imgs">
    <img src="..." class="img">
    <img src="..." class="img">
    <img src="..." class="img">
    <img src="..." class="img">
    ...
  </div>
</div>

.container {
  height: 170px;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.imgs {
  flex: 1;
  /* Not sure if I need anything else here */
}

.img {
  display: inline;
  /* Not sure what to do */
}

Think like this: you have a `.container` column of 2 rows (a title and a row of images) and you want each row to wrap, so both rows require `flex-grow: 1`. Your `.imgs>img` need either `width` or `height` set to `100%` to maintain their ratio, but **not** both width and height. — Rene van der Lende, Jul 21 '20 at 09:43

score 0 · Answer 1 · edited Jul 22 '20 at 09:42

0

Please try this,

.container {height: 170px;width: 100%;border: 1px solid black;}

.imgs {display: flex;}

.img{width:60px;height:60px;margin-right: 10px;}

It works as expected

edited Jul 22 '20 at 09:42

Poul Bak

10,450
5
32
57

answered Jul 21 '20 at 09:43

Prema

1
2

Its working now : https://jsfiddle.net/PremaInbaraj/s1967bLa/5/ – Prema Jul 22 '20 at 09:01
I do not want the items to be be a hardcoded 60px tall, I want them to take up 100% of the remaining space. I might have to change the height of the container to be something else and I don't want to have to change the img height's and width as well. – R. Gillie Jul 23 '20 at 23:50

R. Gillie · Accepted Answer · 2020-07-24T05:37:32.130

Found the solution thanks to this answer.

<div class="container">
  <h4>Title</h4>
  <div class="imgs">
    <img src="..." class="img">
    <img src="..." class="img">
  </div>
</div>

.container {
  height: 170px;
  width: 100%;

  display: flex;
  flex-direction: column;

  border: 1px solid black;
}

.imgs {
  flex: 1;
  min-height: 0;

  border: 1px solid red;
}

.img {
  height: 100%;
  width: auto;
}

I found out that a flex item cannot shrink smaller than the size of their content, min-height: 0 will fix this.

Scale Image Height to Flex-Grown Wrapper

2 Answers2