Make two elements equal height, one with a vertical scroll bar

Question

I am trying to make two sibling div elements the same height. The of them has an overflow-y and a scrollbar with variable height content. The main div has content that is also variable height depending on dynamic content and browser width. The main content div should show all its content. The left scrolling panel should be equal height to the main content and no matter the browser width or height of content, hence the scrolling bar.

Previously, I would have used jQuery, detect window width change and adjust accordingly. But I am trying to do it in a React app.. so ideally it would be CSS only. Is this possible?

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;
}

An example of the mark-up and css is here at JSBIN:

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

Answer 1

为此，将panel-inner绝对定位并设置overflow-y: scroll在其上。

有了它，您可以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>