如何使 parent 与 position:absolute&relative 的最高 child 一样高？

Question

我希望 main 与最大的 child 一样高，但我不知道如何使用位置：相对和绝对。

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，所以我不能在 html 中的 div 之前放置 aside 并使用 display: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;
}

如何使 parent 与 position:absolute&relative 的最高 child 一样高？

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

html

css

drupal