html - 有没有什么办法可以让 aside 元素的高度等于 main 元素的高度？

Question

这是我遇到的问题:我的主要元素由于其中的内容而具有相当长的高度。然而，我的 aside 元素(侧边栏)内容少得多，因此更短，这在美学上并不令人愉悦。

如何使 aside 元素的高度等于主元素的高度(可能在所有情况下我将在主元素中包含更多内容)？

这是我的主要元素:

main {
        display: block;
        width: 75%; 
        float: left;
    }

这是我的旁边元素:

aside {
    display: block;
    background-color: #fff;
    width: 21%;
    float: right;
    padding: 2%;    
}

为 aside 元素设置特定高度不起作用:当我向主元素添加内容时，aside 元素高度属性变得过时。

Answer 1

如果有包装div，使用display: flex;

.wrap{
  display: flex;
 width: 100%;
}
.main {
  border: 1px solid red;
    width: 75%;
    min-height: 500px;
}
.aside {
  border: 1px solid blue;
display: block;
background-color: #fff;
width: 21%;
float: right;
padding: 2%;    
}

<div class="wrap">
  <div class="main">
Main
  </div>
  <div class="aside">
Aside
  </div>
  
</div>