Flex布局交叉轴方向弹性比例控制问题

<!-- HTML -->
<div class="root">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</div>

/* CSS */
.root {
    border: solid 1px gray;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
/*  align-content: flex-start; */
}
.box1 {
    border: solid 1px red;
    width: 120px;
    height: 150px;
}
.box2 {
    border: solid 1px green;
    width: 120px;
    flex: 1;
}
.box3 {
    border: solid 1px blue;
    min-height: 170px;
    flex: 1;
/*  align-self: stretch; */
}

效果图

align-content的默认值是stretch，.root样式默认把剩余的空间分配给两列，尽管第一列是固定宽度的，所以就会出现图示的空隙。而.box3的align-self不知道为什么不能够覆盖align-content设定的值，目前没有办法指定交叉轴的grow、shrink、basis等属性。

Chrom版本：Version 63.0.3239.84 (Official Build) (64-bit)
Safari版本：Version 11.0.2 (13604.4.7.1.3)