用柔性箱实现等高柱

Question

我试图建立一个布局，其中有两个单独的内容组:一个在左侧和右侧，固定宽度(20%/80%)目前。在每一边，我都试图使用flexbox来安排内容:左侧面板带有flex-direction: column，右侧面板带有flex-direction: row wrap。每一边的内容数量可以是灵活的。内容较少的面板应该与另一边的高度相匹配，“更高”的一面。

到目前为止，我能够实现基本的布局，如这个小提琴所示。然而，我的问题是，即使我将高度设置为100%，我也无法使“更短”的面板填充高度。在给定的示例中，左侧面板的'C‘div与右侧面板的'Box7’div之间有一个空空间。html/css代码如下所示。

我怎样才能解决这个问题，或者有没有更简单的布局解决方案？任何帮助都将不胜感激。

HTML

<div class='top'>
    <div class='left'>
        <div class='litem'>A</div>
        <div class='litem'>B</div>
        <div class='litem'>C</div>
    </div>
    <div class='right'>
        <div class='ritem'>Box 1</div>
        <div class='ritem'>Box 2</div>
        <div class='ritem'>Box 3</div>
        <div class='ritem'>Box 4</div>
        <div class='ritem'>Box 5</div>
        <div class='ritem'>Box 6</div>
        <div class='ritem'>Box 7</div>
    </div>
</div>

​

CSS

* { outline: 1px solid Grey; }

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: Cornsilk;
}

.top {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.left {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 100%;
}

.right {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80%;
    height: 100%;
}

.litem, .ritem {
    margin: 0;
    padding: 0;
}

.litem { height: 50%; }
.ritem { height: 50%; width: 33.3%;}

.litem:nth-child(1) { background-color: Cyan; }
.litem:nth-child(2) { background-color: DarkCyan; }
.litem:nth-child(3) { background-color: DarkSeaGreen; }

Answer 1

将height: 100%应用于html和body时，将子元素的增长限制在屏幕的100%以内。

在您的代码中，您的.left flex项确实是按照指定的扩展到height: 100%的。在.left周围添加一个边框以作为示例：演示

如果您移除所有固定高度，您将允许flex容器根据默认设置：align-items: stretch (创建等高列的设置)拉伸所有flex项。演示

当您将flex: 1添加到.left弹性项(.litem)中时，它们将容器中的所有可用空间均匀地分布在它们之间。演示。

简而言之，当您使用height属性时，要重写align-items: stretch，即等高列的flex设置。