Div as square in flexbox

Question

I have a CSS problem that I don't know how to solve. The situation is as follows. I have a <div> which is a flex-item, and which stretches vertically so that it fills the available height of its flex-container. Depending on the size of the browser window this <div> is a rectangle, sometimes taller than wide, sometimes wider than tall.

Now I want to position another <div> inside of this rectangle, which shall be a square. It should be as large as possible with respect to the surrounding rectangle, but it must always be visible entirely.

The typical approach to create a square is to set the padding-bottom to a percent value (which is the same percent value as for width). This actually creates a square, but since in this approach the height always follows the width, it stretches the out rectangle if it's wider than tall.

How can I solve this issue, so that the square is always contained within the boundaries of the size of the rectangle that was calculated by flexbox, ideally without using JavaScript?

Update: Meanwhile, I solved it using JavaScript, but I'd still be interested in a pure CSS solution, if there is any.

Answer 1

Not sure if this is what u you are looking for...

.flex {
  display: flex;
}
.item {
  width: 50%;
}

.square {
  width: 100%;
  background: red;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="flex">
  <div class="item">
    <div class="square">
      
    </div>
  </div>
  <div class="item">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>