Flexbox:右列不应高于左列

时间:2018-02-22 09:52:48

标签: html css css3 flexbox

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

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

1 个答案:

答案 0 :(得分:0)

新解决方案(已编辑)

我不认为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>