3

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
skyscript
  • 175
  • 2
  • 12

3 Answers3

7

For that to work make the panel-inner absolute positioned and set overflow-y: scroll on it.

With that you can make the content dynamically sized by its content and have the panel always equal height, and scroll when its content does not fit

.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>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Set the height in the parent elemrnt, not in the child elements:

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

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

.content {
background: yellow;
width: 400px;
}
MAM
  • 56
  • 9
  • That works, but it's not what I'm trying to achieve. I'm trying to keep the height of the content div dynamic depending on content, and have the scrolling panel adjust itself to match the height. – skyscript Apr 05 '17 at 16:42
0
.parent {
width: 600px;
height: 400px;
display: flex;
}

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

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

Try this. I think you might have to use javascript if you want the height of the div with a scroll to be dependent on the height of the div with dynamic content. Otherwise, you can set their heights to both 100%.

Shully
  • 78
  • 8