One aspect-ratio children in an unknown-height flex parent

Question

Let's say we have a flex container with n children.

If I don't know how height the container is, is it possible to turn one of the children into a keep-aspect-ratio box, as the image shows?

Is there any way to achieve with nor javascript nor setting a height for the container?

In order to achieve that proportion, I'm using the following snippets:

[style*="--aspect-ratio"] {
  position: relative;
}

[style*="--aspect-ratio"]::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

[style*="--aspect-ratio"] > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<header class="header">
 <div>
  <!-- ... title -->
 </div>

 <!-- ... perhaps more children -->

 <div class="header__logo" style="--aspect-ratio: 1">
  <!-- ... square box -->
 </div>
</header>

I've tried also to become the square box to an absolute element, but the content does not keep the aspect ratio.

In addition to the duplicate, another idea here: https://stackoverflow.com/a/29678280/8620333 — Temani Afif, Nov 22 '19 at 14:21
Parent container height is unknown. So the point is to avoid set a height, but height 100% — Hugoren Martinako, Nov 22 '19 at 14:23
Please, unmark the question as duplicated, as you've provided a jQuery solution and a static one — Hugoren Martinako, Nov 22 '19 at 14:24
that why the duplicate is about setting the width based on height, not the opposite — Temani Afif, Nov 22 '19 at 14:24
read carefully the duplicate please, there is no JS involved at all ... — Temani Afif, Nov 22 '19 at 14:25
Do you mind to point me where exactly the solution is? When the solution sets the height? `height: 50vh; /* arbitrary input height; adjust this */` That's what I'm asking, if it's possible to handle it with an unknown height. — Hugoren Martinako, Nov 22 '19 at 14:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202898/discussion-between-hugoren-martinako-and-temani-afif). — Hugoren Martinako, Nov 22 '19 at 14:37

One aspect-ratio children in an unknown-height flex parent

0 Answers0