How to make parent as high as the highest child with position:absolute&relative?

Question

I want main to be as high as the biggest child, but I can't figure out how to make that work with position: relative&absolute.

HTML

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

Because I want to put my aside left and the .layout-content right I have as 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;
}

I'm using Drupal so I can't put aside before div in the html and use display:flex.

I tried for main CSS:

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

Answer 1

As commented, flex-direction will allow you to reverse the order tath elements are rendered in a row.

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

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

.layout-content {
  width: 75%;
}

As an alternative, you can also use the CSS order property to change the position of a single element without having to reverse the direction of the entire row.

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

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

.layout-content {
  width: 75%;
}

Also worth noting that you can use a negative value for order.

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