弯曲等高列，但要注意另一列的最大高度 [英] Flex equal height column but respect max height of another column

问题描述

我如何使以下代码仅适用于CSS(flex)且不使用Javascript，第二列具有动态内容列表，我需要根据第一列的高度为其应用滚动条.

How does I make the below code work just with CSS (flex) and without Javascript, the second column have dynamic list of content for which I need to apply scroll bar depending upon the height of first column.

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>

推荐答案

可以肯定，仅CSS不能做到这一点.获取左列的动态高度并将其分配给右列.

pretty sure you can't do that with just CSS . getting the dinamic height of the left col and assign it to the right col.

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

you can only use fixed height values. like in the example below 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>

这篇关于弯曲等高列，但要注意另一列的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！