CSS: Высота блока, зависящая от ширины

Question

Описанное реализовано тут: https://codepen.io/Coder10000000000/pen/MWvjOpR

Есть два блока - левый и правый. У левого фиксированная ширина в пикселях. У правого - всё оставшееся пространство. При этом внутри правого блока должен находиться квадратный контейнер. Ширина квадратного контейнера равна ширине правого блока, а высота равна ширине.

Для задания контейнеру высоты равной ширине, я использовал трюк с абсолютно спозиционированным псевдоэлементом before. Не понимаю до конца, как это работает, но контейнер действительно становится квадратным. Проблема в том, что в виду абсолютного позиционирования, при увеличении квадратного контейнера, он наползает на нижние блоки, не растягивая по высоте родительский правый блок, а вылезая поверх. А нужно, чтобы квадратный контейнер растягивал родителя.

Есть какой-то способ это исправить? Возможно есть другое решение (резюмируя, нужен квадратный блок с шириной, зависящей от родителя, который при увеличении растягивает высоту родителя)? Я знаю, что высоту, зависящую от ширины можно задать с помощью JS, но необходимо решить задачу средствами CSS

html

<div class="section">
    <div class="section-wrapper">
        <div class="section-wrapper-left">Левый</div>
        <div class="section-wrapper-right">
            Правый
            <div class="content item-responsive">
                <div class="content">Контейнер</div>
            </div>
        </div>
    </div>
</div>
<div>Нижние блоки, на которые наползает абсолютно спозиционированный контейнер</div>

scss

.section {
  width: 100%;
  display: flex;

  &-wrapper {
    background-color: #ff9595;
    height: 500px;
    flex: 50%;
    display: flex;

    &-left {
      background-color: #824caf;
      flex: 180px;
    }
    &-right {
      background-color: #841919;
      flex: calc(100% - 180px);
    }
  }
}

.item-responsive {
    padding-top: 100%; /* (1:1)*100% */
    position: relative;
    background-color: #a7db81;

    &:before {
      display: block;
      content: "";
      width: 100%;
    }

    & > * {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #3e6132;
    }
  }

Answer 1

По вашему описанию похоже вам нужно это, но зачем одинаковая высота и ширина двух не зависимых друг от друга блока:

/* Этот normalize используется в этом компоненте для нормализации стилей.  */
*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}  

html, body { 
  height: 100%;  
  background-color: #fff;
} 

.flex-p {
  display: flex;
  height: 100%;
}

.side-bar {  
  padding: 10px;
  background-color: blueviolet;
  width: 300px;
}

.content { 
  padding: 10px;
  background-color: rgb(240, 93, 35);
  width: 100%;
}

.wrapper {
  max-width: 90%;
  margin: 0 auto;
} 

.cube { 
  padding: 15px;
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid #000;
}

 <body>
    <div class="flex-p">
      <div class="side-bar">Левый</div>
      <div class="content">
        <div class="wrapper">
          <div class="cube">Правый</div> 
          <div class="cube">Куб</div>
        </div>
      </div>
    </div>
  </body>

*Вы конечно можете на js получить высоту другой области, но зачем, или объясните вашу конечную цель, для чего вам так усложнять верстку. *

Можно создать 1 класс и навешать обеим 2 независимым блокам, тогда стили высоты и ширины применятся к тем блокам, на который вы повесили класс. Однако это не высчитывается динамически.

Вот пример с классами.

/* Этот normalize используется в этом компоненте для нормализации стилей.  */
*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}  

html, body { 
  height: 100%;  
  background-color: #fff;
} 

.flex-p {
  display: flex;
}

.side-bar {  
  background-color: blueviolet;
}

.content { 
  background-color: rgb(240, 93, 35);
  width: 100%;
}

.wrapper {
  max-width: 90%;
  margin: 0 auto;
} 

.cube { 
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid #000;
}

.main { 
  width: 50%;
  height: auto;
  padding: 10px;
}

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="flex-p">
      <div class="side-bar">
        <div class="wrapper">
          <div class="nav main">Левый fafafsfsafsafsa asfafas asf asf asff asf asf fasf asf asf fasfsaf </div>
        </div>
      </div>
      <div class="content main">
        <div class="wrapper">
          <div class="cube main">Правый</div> 
          <div class="cube main">Куб</div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

Хак с отступом вполне рабочий. Думаю, что достаточно заменить высоту родителя с height на min-height и нужное поведение будет достигнуто:

.section {
  display: flex;
  width: 100%;
}
.section-wrapper {
  display: flex;
  /* height: 500px; */
  min-height: 500px;
  flex: 50%;
  background-color: #ff9595;
}
.section-wrapper-left {
  flex: 180px;
  background-color: #824caf;
}
.section-wrapper-right {
  flex: calc(100% - 180px);
  background-color: #841919;
}

.item-responsive {
  position: relative;
  padding-top: 100%;
  /* (1:1)*100% */
  background-color: #a7db81;
}
.item-responsive::before {
  content: "";
  display: block;
  width: 100%;
}
.item-responsive > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3e6132;
}

<div class="section">
    <div class="section-wrapper">
        <div class="section-wrapper-left">Левый</div>
        <div class="section-wrapper-right">
            Правый
            <div class="content item-responsive">
                <div class="content">Контейнер</div>
            </div>
        </div>
    </div>
</div>
<div>Нижние блоки, на которые наползает абсолютно спозиционированный контейнер</div>

БЛОГ НА HUSL

CSS: Высота блока, зависящая от ширины

Ответы (2 шт):