Same width as height on a flex child element - css

Question

I'm working on a navbar where I will have a burger menu for toggling an extended menu.
I want to avoid to explicitly set a width to the burger menu element (.extendedMenu__toggle) and have it scale based on the font-size set on .header if possible.
The element gets it height from the parent as it's flex, but not sure how I can translate that into a proper width property so that I get a perfect square.
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 1.3rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div class="extendedMenu__toggle">
<span></span>
<span></span>
<span></span>
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>

Answer 1

Option #1: Use Javascript. After the element renders you would check the height then set flex-basis to element height. I also set overflow: hidden since my content is "not square".
SO's code snippet seems not to like window.onload so here's a codepen example
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 4rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
overflow:hidden;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div id="box" class="extendedMenu__toggle">
menu
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>
Option #2: Use an image. This is kinda hacky but a square image will try to retain its proportions long as it's rendered in the HTML. Here are a few ways, available:
place an image of the hamburger menu with a transparent background in HTML. (go large so you're not scaling up, just down).
place a 10px x 10px transparent image in HTML and absolutely position other content on top of it.
create a pseudo class with content: url(image.jpg); in the CSS then layer content above it.
The first is the easiest to show so I'm doing that one. I would add a max-height to the image so it doesn't get out of control.
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 4rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
}
.extendedMenu__toggle img {
display:block;
max-height: 6rem;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div class="extendedMenu__toggle">
<img src="https://cdn1.imggmi.com/uploads/2018/10/15/e86f8a312edd60d643c8d80212b64dba-full.png" />
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>