Как сделать родителя таким же высоким, как у самого высокого ребенка с положением: абсолютным и относительным?

Question

Я хочу, чтобы main был таким же высоким, как у самого большого ребенка, но я не могу понять, как заставить это работать с позицией: относительной и абсолютной.

HTML

<main>
  <div class="layout-content"></div>
  <aside class="layout-sidebar-first"></aside>
</main>

Поскольку я хочу поставить свои aside влево и .layout-content вправо, у меня будет CSS:

main {
  max-width: 1000px;
  height: 100%;
  position: relative;
}

.layout-sidebar-first {
  width: 25%;
  position: absolute;
  left: 0;
}

.layout-content {
  width: 75%;
  position: absolute;
  right: 0;
}

Я использую Drupal, поэтому я не могу поставить aside перед div в html и использовать дисплей: flex.

Я пытался для main CSS:

height:100% or auto;
box-sizing: border-box;
contain: content;
display:block

Answer 1

Как прокомментировано, flex-direction позволит вам изменить порядок следования элементов в строке.

main {
  max-width: 1000px;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.layout-sidebar-first {
  width: 25%;
}

.layout-content {
  width: 75%;
}

В качестве альтернативы вы также можете использовать свойство CSS order для измените положение отдельного элемента, не изменяя направление всей строки.

main {
  max-width: 1000px;
  height: 100%;
  display: flex;
}

.layout-sidebar-first {
  width: 25%;
  order: 2;
}

.layout-content {
  width: 75%;
}

Также стоит отметить, что вы можете использовать отрицательное значение для order.

.layout-sidebar-first {
  width: 25%;
  order: -1;
}