html - 使用flexbox实现相等高度的列

我正在尝试构建一个布局，它有两个独立的内容组：一个在左侧，一个在右侧，目前固定宽度（20%/80%）。在每一边，我试图通过使用flexbox来排列内容：左面板使用flex-direction: column，右面板使用flex-direction: row wrap。每个内容的数量可以是灵活的。内容较少的面板应与另一面“较高”的高度相匹配。
到目前为止，我已经能够实现基本的布局，如jsfiddle所示。然而，我的问题是，我无法使“较短”面板填充高度，即使我将高度设置为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; }

最佳答案

将height: 100%应用到html和body时，将子元素的增长限制为屏幕的100%。
在您的代码中，您的.leftflex项确实按指定扩展到了height: 100%。在.left周围添加一个边框作为插图：DEMO
如果删除所有固定高度，则将根据默认设置启用flex容器来拉伸所有flex项：align-items: stretch（创建等高列的设置）。DEMO
当您将flex: 1添加到.leftflex项（.litem）时，它们将均匀地分配容器中的所有可用空间。DEMO。
简而言之，当您使用height属性覆盖align-items: stretch时，等高列的flex设置。