How to style a square div dynamically based on the height? - html

Question

I already read this Q&A and the blog posts that it links to. The problem here is that the referred-to methods only work if you have a set width and are setting the height dynamically. But how can you do it if you need the opposite--the height is known but the width is not?
I have a visual element, specified in CSS, that I need to appear consistently in multiple contexts. (For the purposes of this exercise it may as well be a red square.) The contexts have set heights--e.g. a nav with height x, a list-item with height y, etc. The width of the element, therefore, needs to be based on the height -- not the other way around.
I tried reversing the method mentioned in the linked articles (to use height instead of width, and padding-right instead of padding-top), but it doesn't work -- the element winds up with no width, and thus the red square (.my-box .content) doesn't appear:
HTML:
<div class="outer">
<div class="my-box">
<div class="content">
</div>
</div>
<div class="more-stuff">
Some more stuff goes here
</div>
</div>
CSS:
.outer {
background-color: white;
height: 72px;
padding: 12px;
display: flex;
flex-direction: row;
}
.my-box {
height: 100%;
position: relative;
}
.my-box::before {
content: "";
display: block;
padding-left: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
.more-stuff {
flex: 1 1 auto;
margin-left: 12px;
}
JSFiddle for the above
Does anyone know if this is possible without JS or hardcoding the dimensions every time? Googling finds nothing that works for dynamic height--even with quotation marks. :(

Answer 1

JS is the only reliable option in your case.
In CSS box model (and HTML in general) width and height are not symmetric.
In general HTML has "endless tape" layout model - width is fixed (by view/window) but height is not known upfront - needs to be calculated.
CSS does layout in following steps:
do horizontal layout inside left and right bounds. At the end this will give you content height.
If height:auto (by default) set element height computed at step #1.
Do vertical alignment if needed (table-cell and flexbox elements).
Mathematically speaking height = F(width,content) and F here is a step function - different input width values may give you same output height value. Step function has no determined inverse function - there is no such an inverse function F' that will allow you to calculate width = F'(height,content).
(My pardon for the math on pure CSS subject, but I don't know how to explain it otherwise.)

Answer 2

A little bit a hack, but still a solution.
We create a box with ratio 1:1, set the width and rotate box transform: rotateZ(90deg).
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
}
.Box {
width: 50vmin; /* or 400px for ex. */
position: relative;
background-color: rgba(0,0,0,.2);
overflow: hidden;
position: relative;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.Box:before {
content: "";
display: block;
height: 0;
padding-top: 100%;
}
.Box__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 12px;
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
<div class="Box">
<div class="Box__content">Box</div>
</div>
P.S.: SVG can be useful in that case, i hope.