1

Based on this answer, I try to shrink/grow a flex-item img element to the height of its sibling. The height gets adjusted correctly, and the image is shrunk correctly - respecting the aspect ratio - but the img element still consumes as much width as it would without shrinking it (look at the whitespace):

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  border: thin solid black;
}

img {
  flex-basis: 0px;
  flex-grow: 1;
  object-fit: contain;
  overflow-y: auto;
}
<main>
  <section>
    <img src="http://via.placeholder.com/200x200">
  </section>
  <section>
    <div>Match my height.</div>
  </section>
</main>

Actual output, in case browsers (will) render the above snippet differently (in the future):

enter image description here

Expected output:

enter image description here

I also tried to set overflow-x: auto; or width: 100% (on img), but it did not make any difference. Is there a way to get the expected shrunk image dimensions in this flexbox layout?

There are many similar questions, but they don't offer the above flexbox solution. Just to name some:

So, there are alternatives if there is no flexbox solution...

stackprotector
  • 10,498
  • 4
  • 35
  • 64
  • The img does not have a sibling. – A Haworth Aug 09 '22 at 19:53
  • How is this not a duplicate https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings?r=SearchResults&s=13%7C24.2725 – Paulie_D Aug 09 '22 at 19:55
  • 1
    @Paulie_D it's about the width of the image that need to shrink – Temani Afif Aug 09 '22 at 21:46
  • @AHaworth Technically, yes ;-) The _flexbox workaround_ requires a wrapper around the items. So the `section` elements only exist because of that. – stackprotector Aug 10 '22 at 05:15
  • Do yu have to stick with flex? – A Haworth Aug 10 '22 at 07:00
  • @AHaworth Actually, I think my design might be wrong. If I want that image to have the height of another element, then it is not flexible at all. And therefore, it should not be a flex item. But I am currently doing more research on this... – stackprotector Aug 10 '22 at 07:07

1 Answers1

0

You will probably have better luck with CSS grid but I think this won't work in all the browsers.

Chrome will give a good result but Firefox will fail

main {
  display: grid;
  grid-template-columns: auto auto;
  place-content: start;
}

section {
  border: thin solid black;
}

img {
  height: 0;
  min-height: 100%;
  object-fit: contain;
  overflow-y: auto;
}
<main>
  <section>
    <img src="http://via.placeholder.com/200x200">
  </section>

  <section>
    <div>Match my height.</div>
  </section>
</main>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • It does indeed not work in Firefox. As you own the CSS and flexbox gold badges... Can you say, that it is not possible to solve my problem with flexible boxes? I mean... "It's impossible." could be a valid answer to my problem, until someone else proves it wrong (in the future). – stackprotector Aug 10 '22 at 06:35
  • 1
    @stackprotector I am not sure at 100% that's it's impossible but I know the "complex" reasons that make such layout not easy to achieve. You question can remain open and a new answer can be added at any time (either to confirm it's impossible or to give a solution) – Temani Afif Aug 10 '22 at 08:11