1

I am trying to implement a layout similar to this: .

The requirement I have is to create two adjacent boxes: one that contains multiline, dynamic, text and the other that must be a square whose side is determined by its sibling's height.

The problem is that i am not able to set the dimensions of the square based on the implicit height of the parent / sibling.

I tried to put the two divs (square+text) in a flex container and to set the aspect-ratio of the square div to 1, but even if the align-items property on the parent is set to stretch the height is not taken in to account when calculating the ratio.

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui;
  margin-left: 2rem;
}

.wrapper {
  display: flex;
  border: 1px solid black;
  width: fit-content;
}

.square {
  width: 100px;
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

.text {
  padding: 0 1rem;
}

.text :last-child {
  margin-bottom: 2rem;
}
<div class="wrapper">
  <div class="square"></div>
  <div class="text">
    <h1>Some text of different sizes</h1>
    <p>Some other text that may be present</p>
  </div>
</div>

Here is a link of a codepen with the setup.

disinfor
  • 10,865
  • 2
  • 33
  • 44
Mauro
  • 11
  • 3
  • 1
    Please review [how to ask a good question](https://stackoverflow.com/help/how-to-ask) - part of is not including links to code on other websites. Instead please just put your code directly in your question as a snippet. When you edit your question press the button that looks like `[<>]` – Chris Barr Jul 13 '23 at 11:32
  • Do I get it right, that the square on the left should always match the height of the whole box and the width of the square should be the same as the height? So the width should be dynamic and proportional to the height of the box? Or is it fine, to have a fixed width&height on the square and center it? – Geilmaker Jul 13 '23 at 12:49

1 Answers1

-2

Use .wrapper { display: grid; } and .square { height: 0; min-height: 100%; } trick:

* {
  box-sizing:border-box;
}

body {
  font-family: system-ui;
  margin-left: 2rem;
}

.wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid black;
  width: fit-content;
}

.square {
  height: 0;
  min-height: 100%;
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

.text {
  padding: 0 1rem;
}

.text :last-child {
  margin-bottom: 2rem;
}
<div class="wrapper">
  <div class="square"></div>
  <div class="text">
    <h1>Some text of different sizes</h1>
    <p>Some other text that may be present</p>
  </div>
</div>
imhvost
  • 4,750
  • 2
  • 8
  • 10
  • I hope you are not going to repeat the same answer over and over again: https://stackoverflow.com/a/76495784/8620333 ? We have a duplicate feature for this – Temani Afif Jul 13 '23 at 15:09
  • @TemaniAfif I'm sorry i didn't find the other posts right away before submitting mine, but this actually answer my question. I auto-flagged my question, but i'd rather not delete it. – Mauro Jul 13 '23 at 15:42
  • @Mauro no need to be sorry, my comment was not meant to you but to the OP already giving the same answer so he knows there is a duplicate – Temani Afif Jul 13 '23 at 15:46
  • @TemaniAfif in the link you provided to my answer this same trick solves a completely different problem. With all due respect, I don't understand your claims. Can you claim that these are duplicates? – imhvost Jul 13 '23 at 17:50
  • @TemaniAfif Looked - you closed two questions that just use the same trick as your answer. But the questions you closed have a completely different context. – imhvost Jul 13 '23 at 21:00