Flexbox：右列不应高于左列

Question

我正在尝试使用flexbox实现2列布局。 Left列具有动态高度，应设置整行的高度，这意味着应该切断右行，并且不要增加父容器超过此点的高度。

然而，如何在水平布局中实现这一目标？增长和收缩只会影响宽度，而不会影响身高。

Answer 1

新解决方案（已编辑）

我不认为CSS本身就可以做到这一点，因为它总是从父母级别到孩子级，因此孩子们无法设置父级的身高。这需要一些JS（读取左子的高度，然后将其应用于父级）

$(".container").height($(".left").height())

.container {
  display: inline-flex;
  align-items: center;
  border: red solid 2px;
}
.container .left {
  width: 100px;
  border: green solid 3px;
}
.container .right {
  width: 100px;
  border: blue solid 3px;
  overflow-y: auto;
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="left">
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
	</div>
	<div class="right">
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
		some text<br>
	</div>
</div>