Flex equal height column but respect max height of another column [duplicate]

问题

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

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

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

回答1:

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.

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>

回答2:

You could absolute position the list.

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

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

来源：https://stackoverflow.com/questions/44107222/flex-equal-height-column-but-respect-max-height-of-another-column

标签

css

html5

twitter-bootstrap

css3

flexbox