Выровняйте четыре элемента без пустого пространства для блоков контента с css

Question

У меня проблема с контейнером 4 блока с разной высотой в одном месте.

Вы можете посмотреть мое демо по ссылке https://jsfiddle.net/inthedark122/ncvjaeqy/1/

HTML Код :

<div>---- You can change only css styles!!!</div>
<div>---- height - height - what is affixed is for understanding the content, in the original height is unknown in all cases
We know only width = 48 for ga и fa, the content on the right (f and g) should occupy all the remaining space as done in the example</div>
<div>
---- The content of 4 blocks at any time may change, because these 3 cases must be considered as one, but at a different time
</div>

<div>There shouldn’t be any empty space between f and g, there shouldn’t be any space between fa / ga, you need to stretch g to f to fill this spaceо</div>
<div class="root">
  <div class="fa">fa</div>
  <div class="f">f</div>
  <!-- <div class="g-root"> -->
    <div class="ga">ga</div>
    <div class="g">g</div>
  <!-- </div> -->
</div>

<div>
  Empty space should not be between f and g, between fa / ga empty space should be, ga should be on the same level with g
</div>
<div class="root">
  <div class="fa">fa</div>
  <div class="f" style="height: 150px;">f</div>
  <!-- <div class="g-root"> -->
    <div class="ga">ga</div>
    <div class="g">g</div>
  <!-- </div> -->
</div>

<div>
  The height of the lower blocks should be aligned with the maximum height ga or g
</div>
<div class="root">
  <div class="fa">fa</div>
  <div class="f" style="height: 150px;">f</div>
  <!-- <div class="g-root"> -->
    <div class="ga" style="height: 200px;" >ga</div>
    <div class="g">g</div>
  <!-- </div> -->
</div>

CSS код:

body {
  padding: 0;
  margin: 0;
}

.root {
  display: flex;
  flex-wrap: wrap;
  color: white;
  position: relative;
}

.g-root {
  display: flex;
  width: 100%;
}

.fa {
  height: 128px;
  /* position: absolute; */
  z-index: -1;
  background-color: grey;
}

.f {
  height: 50px;
  background-color: red;
  /* flex: 1; */
  /* width: 100%; */
  width: calc(100% - 48px);
  /* margin-left: 48px; */
  /* margin-bottom: 128px; */
}


.g {
  height: 180px;
  background-color: blue;
  flex: 1;
}

.ga {
  border-top: 1px solid white;
  background-color: black;
  /* margin-top: -128px; */
}

.fa, .ga {
  width: 48px;
  color: white;
}

Я пробую абсолютную позицию и плавающий, но я получил пустое пространство между f и g или блок "ga" не был на том же строка с g.

Пожалуйста, проверьте все комментарии в моей демонстрации, чтобы лучше понять мою проблему

UPD1:

Основная цель - удалить пустое пространство между f и г (правая сторона). Когда я делаю это, я получаю два вопроса:

• блоки для fa и ga попадают друг на друга
• , когда панель f больше, чем панель fa тогда панель га не совпадает с г . Для этого случая нам нужно пустое пространство между fa и ga

Подробнее

Объект представлен на 4 прямоугольника. Существует 3 возможных состояния объекта в разные промежутки времени. Они представлены в Примере.

Необходимо соблюдать правила:

1. между f и g никогда не должно быть пустого пространства (во всех трех примерах). Вам нужно растянуть g до f, чтобы заполнить это пространство.
2. Если высота f больше, чем fa, между fa и ga должно быть свободное пространство.
3. Если высоты ga и g различны, то они должны простираться до максимума.

Примечание: редактировать можно только CSS. html запрещено трогать.

Answer 1

Можете ли вы просто попробовать удалить фиксированную высоту height: 50px; для класса .f. Я думаю, что это должно решить вашу проблему.

Если нет, вы можете попробовать сгруппировать .f и .fa в одно div и .g и .ga в другое.

Как показано на этой скрипке https://jsfiddle.net/ah6f5ozx/4/

Answer 2

Я внес необходимые изменения, думаю, вам нужно поэкспериментировать со свойством flex для других примеров. Надеюсь, это поможет -:

https://jsfiddle.net/e96cprb2/

body {
  padding: 0;
  margin: 0;
}

.root {
  display: flex;
  height: 150px;
}
.a-root{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.g-root{
  display: flex;
  flex-direction: column;
  flex: 5;
}
.fa{
  display: flex;
  background: red;
  flex: 1;
  
}
.ga{
  display: flex;
  background: grey;
  flex: 1;
}
.f{
  display: flex;
  background: blue;
  flex: 1
}
.g{
  display: flex;
  background: black;
  flex: 5
}

<div>---- You can change only css styles!!!</div>
<div>---- height - height - what is affixed is for understanding the content, in the original height is unknown in all cases
We know only width = 48 for ga и fa, the content on the right (f and g) should occupy all the remaining space as done in the example</div>
<div>
---- The content of 4 blocks at any time may change, because these 3 cases must be considered as one, but at a different time
</div>

<div>There shouldn’t be any empty space between f and g, there shouldn’t be any space between fa / ga, you need to stretch g to f to fill this spaceо</div>
<div class="root">
  <div class="a-root">
    <div class="fa">fa</div>
    <div class="ga">ga</div>
  </div>
  <div class="g-root">
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</div>

<div>
  Empty space should not be between f and g, between fa / ga empty space should be, ga should be on the same level with g
</div>
<div class="root">
  <div class="a-root">
    <div class="fa">fa</div>
    <div class="ga">ga</div>
  </div>
  <div class="g-root">
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</div>

<div>
  The height of the lower blocks should be aligned with the maximum height ga or g
</div>
<div class="root">
  <div class="a-root">
    <div class="fa">fa</div>
    <div class="ga">ga</div>
  </div>
  <div class="g-root">
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</div>