使两个元素等高，其中一个元素带有垂直滚动条

我试图使两个同级 div 元素具有相同的高度。其中有一个溢出 y 和一个具有可变高度内容的滚动条。主 div 的内容高度也可变，具体取决于动态内容和浏览器宽度。主要内容 div 应显示其所有内容。左侧滚动面板的高度应与主要内容的高度相同，无论浏览器的宽度或内容的高度如何，因此滚动条也是如此。

以前，我会使用 jQuery，检测窗口宽度变化并进行相应调整。但我试图在 React 应用程序中做到这一点......所以理想情况下它只是 CSS。这可能吗？

HTML:

<div class="parent">
    <div class="panel-with-scroll">
       <div class="panel-inner">
        <p>panel with scroll</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
      </div>
    </div>
    <div class="content">
      <p>content panel</p>
    </div>
  </div>

CSS:

.parent {
  width: 600px;
  display: flex;
}

.panel-with-scroll {
  width: 200px;
  height: 400px;
  overflow-y: scroll;
  background: pink;
}

.content {
  background: yellow;
  width: 400px;
  height: 300px;
}

JSBIN 上有一个标记和 css 的示例：

https://jsbin.com/yivonew/edit?html,css,输出 https://jsbin.com/yivonew/edit?html,css,output

为了做到这一点，使panel-inner绝对定位和设置overflow-y: scroll on it.

这样你就可以使content根据其内容动态调整大小，并使面板始终等高，并在其内容不适合时滚动

.parent {
  width: 600px;
  display: flex;
}
.panel {
  position: relative;
  width: 200px;
  background: pink;
}
.panel-inner {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow-y: scroll;
}
.content {
  background: yellow;
  width: 400px;
}

<div class="parent">
    <div class="panel">
       <div class="panel-inner">
        <p>panel with scroll</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
      </div>
    </div>
    <div class="content">
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
    </div>
  </div>