0

I have this very simple flexbox layout with some text and a background image element beside it. The background image element to the right needs to automatically keep the same height as the text element as well as an aspect ratio of 1/1, like so:

Expected: enter image description here

But the aspect ratio property is ignored. The height of the #image element is set to the height of the flexbox like I want it (since the flexbox by default sets align-items: stretch). But the width stays at 0, despite the aspect ratio property, which should set the width to the same as the height.

Interestingly, if the flexbox is set to flex-direction: column it does work as expected.

Why isn't aspect ratio correctly applied in a row flexbox and how do I fix it?

#wrapper {
  display: flex;
}

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
}
<div id="wrapper">
  <div id="text">
    <h3>A headline</h3>
    And some text below it<br>
    Element to the right should be a square
  </div>
  <div id="image"></div>
</div>
Illiou
  • 315
  • 1
  • 2
  • 9

2 Answers2

0

aspect-ratio will work when one of width and height will be define then second property width/height will adjust according to aspect-ratio.

#wrapper {
  display: flex;
}

#image {
  height: 120px;
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
}
<div id="wrapper">
  <div id="text">
    <h3>A headline</h3>
    And some text below it<br>
    Element to the right should be a square
  </div>
  <div id="image"></div>
</div>
sahilatahar
  • 568
  • 2
  • 13
  • Well the height needs to be dynamically set to be the same height as the text element always. And I've seen other working examples where neither height or width were fixed. But in this case it apparently can't use the height implicitly set by the flexbox container. – Illiou May 03 '23 at 12:21
  • @Illiou Well, If you want to set the height same as height of text element, use the unit ch. For example, in your case add `height : 1ch` to `#image{....}` in your CSS file. I would like to ask you to edit your question with what exactly you are looking for. – ADasGH May 03 '23 at 12:37
  • Using `ch` would set the height to something smaller than a line of text, not the height of the whole text container. My question already mentioned that I need it to be dynamic, but I have clarified the wording and added a screenshot. – Illiou May 03 '23 at 13:26
0

Maybe a bug. Maybe not. Can't really tell at the moment with limited review.

But seems to work fine in Grid.

#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
}

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
}
<div id="wrapper">
  <div id="text">
    <h3>A headline</h3>
    And some text below it<br>
    Element to the right should be a square
  </div>
  <div id="image"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701