Preserve aspect ratio using div-CodePudding

TL;DR
The square class should be a square in all testcases.

The following html includes three testcases. All testcases contain a flex-box which holds three divs. The div in the middle has a square class and (as the name suggests) should be a square in all testcases. The square should fill up as much space of the container as possible, but shouldn't exceed it of course.

I already found a solution here, but it fails on the second and third testcase.

The solution shouldn't include javascript if possible and shouldn't use aspect-ratio if possible, because it has bad browser support currently.

Any help is gratefully appreciated.

Codepen

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  background-color: yellow;
}

<!-- 1. Testcase -->
<div  style="width: 200px; height: 400px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

<!-- 2. Testcase -->
<div  style="width: 400px; height: 200px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

<!-- 3. Testcase -->
<div  style="width: 200px; height: 200px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

CodePudding user response：

Unless you need to support the deprecated IE you can use aspect-ratio:

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  background-color: yellow;
  aspect-ratio: 1 / 1;
  width: 100%;
}

<!-- 1. Testcase -->
<div  style="width: 200px; min-height: 400px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

<!-- 2. Testcase -->
<div  style="width: 400px; min-height: 200px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

<!-- 3. Testcase -->
<div  style="width: 200px; min-height: 200px">
  <div >Hello</div>
  <div >World</div>
  <div >Hello</div>
</div>

CodePudding user response：

To make you .square element to keep correct aspect ratio without aspect-ratio prop, you could use pseudo elements, see:

Also, if you don't want to use grid approach, you can make this container relative and it's child span element - absolute with correct positioning if needed.

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  display: grid;
  grid-template-areas: 'content';
  background-color: yellow;
  width: 100%;
}

/* place text content and square pseudo el. to same cell */
.square:before,
.square > span {
  grid-area: content;
}

.square:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%; /* make it square */
}

<!-- 1. Testcase -->
<div  style="width: 200px; min-height: 400px">
  <div >Hello</div>
  <div ><span>World</span></div>
  <div >Hello</div>
</div>

<!-- 2. Testcase -->
<div  style="width: 400px; min-height: 200px">
  <div >Hello</div>
  <div ><span>World</span></div>
  <div >Hello</div>
</div>

<!-- 3. Testcase -->
<div  style="width: 200px; min-height: 200px">
  <div >Hello</div>
  <div ><span>World</span></div>
  <div >Hello</div>
</div>