Flex 等高列但尊重另一列的最大高度 [重复]答案

【问题标题】：Flex equal height column but respect max height of another column [duplicate]Flex 等高列但尊重另一列的最大高度 [重复]
【发布时间】：2017-10-21 18:40:40
【问题描述】：

我如何使以下代码仅使用 CSS (flex) 而没有 Javascript，第二列具有动态内容列表，我需要根据第一列的高度应用滚动条。

HTML

<div class="row d-flex">
  <div class="col-lg-6 mx-200">
    <img class="img-responsive" src="lorem.jpg"/>
  </div>
  <div class="col-lg-6 respect-left-col-height of-a">
    <ul>
      <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
    </ul>
  </div>
</div>

风格

<style>
  .mx-200 {
    max-height: 200px;
  }

  .of-h {
    overflow: auto
  }
</style>

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案1】：

很确定你不能只用 CSS 来做到这一点。获取左列的动态高度并将其分配给右列。

您只能使用固定高度值。就像下面的例子 jsFIddle

.of-h {
  overflow-y: scroll
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.col-lg-6 {
  border: 1px solid red;
  max-height: 200px;
}

<div class="row row-eq-height">
  <div class="col-lg-6 mx-200">
    <img class="img-responsive" src="http://placehold.it/350x150">
  </div>
  <div class="col-lg-6 respect-left-col-height of-h">
    <ul>
      <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
			  <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
			  <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
			  <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
			  <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
			  <li>Lomre</li>
      <li>Ipsum</li>
      <li>... list goes ...</li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案2】：

你可以绝对定位列表。

ul {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}

https://www.codeply.com/go/v6JEmLN72s

【讨论】：