Та же самая ширина как высота на гибком дочернем элементе

Question

Я работаю над панелью навигации, где у меня будет меню бургера для переключения расширенного меню.

Я хочу избежать явного задания ширины элемента меню бургера (.extendedMenu__toggle) и иметьон масштабируется на основе размера шрифта, установленного на .header, если это возможно.

Элемент получает его высоту от родителя, поскольку он гибкий, но не уверен, как я могу перевести это в правильное свойство ширины, чтобы яполучить идеальный квадрат.

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

Вариант № 1: Используйте Javascript.После рендеринга элемента вы должны проверить высоту, а затем установить flex-basis на высоту элемента.Я также установил overflow: hidden, поскольку мой контент "не квадратный".

Фрагмент кода SO, похоже, не нравится window.onload, так что вот пример codepen

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>

Вариант № 2: использовать изображение.Это немного странно, но квадратное изображение будет пытаться сохранить свои пропорции, пока оно отображается в HTML.Вот несколько доступных способов:

• Поместить изображение меню гамбургера с прозрачным фоном в HTML.(увеличьте масштаб, чтобы не увеличивать, просто уменьшите).
• поместите прозрачное изображение размером 10px x 10px в HTML и расположите поверх него абсолютно другое содержимое.
• создайте pseudo class с content: url(image.jpg); в CSS, затем слой над ним.

Первое, что проще всего показать, так что я делаю это.Я бы добавил max-height к изображению, чтобы оно не выходило из-под контроля.

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>