html - 限制列具有另一列的高度

Question

我希望蓝色列的高度与白色列完全相同，也就是说，如果蓝色列内的内容超过白色列的高度，那么蓝色列将有一个滚动条。白色列具有动态内容。

这是我目前拥有的:

这是我想要实现的:

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
}
.card-container.card {
  width: 360px;
  padding: 25px 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.card {
  margin: 0;
}
.release-notes {
  font-size: 12px !important;
  color: #fff;
  background-color: #0082CA;
  overflow: auto;
}
.release-notes > ul {
  padding: 10px;
}

<div class="vertical-center">
  <div class="container">
    <div class="wrapper">
      <div class="card card-container">
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
      <div class="card card-container release-notes text-left">
        <div class="text-uppercase"></div>
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

所以你需要做的是运行一些 jQuery 来找到左边 ul 的高度并设置右边 ul 的高度到相同的值。

var new_height = jQuery('.card-container.left ul').height();
jQuery('.card-container.release-notes ul').height(new_height);

然后你需要设置右边的ul有overflow-x:scroll;

请参阅下面编辑的 fiddle :

https://jsfiddle.net/stv7v2a1/3/

--- 编辑 ---

请注意，我必须向左侧的 ul 添加一个类，以帮助在我的 jQuery 和 CSS 中区分它。