CSS等于高度div但匹配较小的高度

Question

我试图让两个div具有相同的高度，这可以通过flexbox很好地使用这样的东西来完成：

section {
  display: flex; /* establish flex container */
}

/* non-essential decorative styles */
section {
    margin: 0;    
    padding: 0;
    border: 1px solid #777;
    background-color: yellow;
}

div {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    margin: 5px;
    display: flex;
}

并且

<section>
  <div>1</div>
  <div>2<br/>2<br/>2</div>
</section>

但这只会使较小的div增长到与较高的div相匹配的高度。我希望相反，较大的一个将收缩到较小的高度并隐藏溢出（我需要添加一个滚动条或一些按钮来展开）。有没有办法在不增加固定高度的情况下这样做？固定高度是一个非理想的解决方案，因为我无法保证较小div的高度始终相同，我希望两个div的内容排成一行。