Variable Height Scrolling Div, Positioned Relative to Variable Height Sibling

Inner content and scroll bar cut off by height of sibling element when parent element height set with vh

You want to avoid setting explicit heights on things whenever possible. That tends to bite you. Set the rules for your flex layout and let it do its thing. If you need whitespace somewhere, keep things simple and add it to the box's contents, not the box itself. By separating the concerns of layout and content, you make it easier to pluck out one bit of content and replace it without getting into the CSS for your layout.

Scroll into the CSS for hints.

* { box-sizing: border-box; margin: 0; padding: 0; }
body: {  height: 100vh; }
.grid-container {    display: grid;    grid-template-columns: 1fr 5fr;    grid-template-areas: 'left right';    justify-content: space-around;    grid-gap: 12px;    width: 90vw;    height: 100vh;    margin: auto;}
.left {  grid-area: left;}
.right {  gird-area: right}
.side {  display: flex;  flex-direction: column;  justify-content: center;  height: 100%;}
.outer {  height: 90vh;   margin: auto;  position: relative;  border: 1px solid blue;  display: flex; /* <--------------- change */  flex-direction: column; /* <--------------- add */}
.inner {  /* height: 100%; <--------------- remove */  overflow: auto;}
h1 {  flex: 0 0; /* <--------------- change */  background: lightgrey;}
p {  height: 100px;}

<div class="grid-container">  <div class="left">    <div class="side">      <div class="outer">        <h1>other content</h1>        <div class="inner">          <p>1</p>          <p>2</p>          <p>3</p>          <p>4</p>          <p>5</p>         </div>       </div>    </div>
  </div>  <div class="right"></div>      </div>

Laying out elements relative to a sibling with max-height:100%

You may add max-height: 90vh; to article element. Than it starts working without any other changes to markup or style.

Check modified example: https://jsbin.com/kofepotiji/edit?css,output

Current browser support is rather good: http://caniuse.com/#search=vw

The only drawback is that on really small heights padding of #lightbox becomes bigger than 10vh. This may be fixed by changing padding from px to vw and vh, but it occurs if height of viewport is less than 600-700px.

How to make a scroll div height only as big as sibling div in row

You should wrap the #first with extra wrapper and apply the background color to it. And use height:0 min-height:100% trick on the #first

I also fixed your html mistake. An ID can only be used once per page. So I changed the #block as .block

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

.scroll-area {
  overflow-y:auto;
  background-color: #00F;
}

#first {
  min-height: 100%;
  height: 0;
}

#second {
  background-color: #0F0;
  /* height: fit-content; // unnecessary */
  width: 200px;
}

.block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div class="scroll-area">
    <div id="first">
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
    </div>
  </div>
  <div id="second">
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>

How to have div same height as sibling and overflow-y auto using flex

You need a script to do this.

1. Set the height of left box to "0": #results { height: 0; }. That way it does not interfer by resizing the right side box.

2. Use an Eventlistener to run the a function after DOM loading: document.addEventListener('DOMContentLoaded', boxResize);

3. Use also an Eventlistner to run the same function again if the browser is resized to stay "up-to-date": window.addEventListener('resize', boxResize);

4. Get the height of the right side box in JS with and save it a variable: let divA = document.querySelector("#map").offsetHeight;

5. resize the left box with the size of the variable: document.querySelector("#results").style.height = divA + "px";

document.addEventListener('DOMContentLoaded', boxResize);
window.addEventListener('resize', boxResize);

function boxResize() {
  let divA = document.querySelector("#map").offsetHeight,
      divB = document.querySelector("#results");
  divB.style.height = divA + "px";
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background-color: red;
  height: 50px;
  flex: 0 0 auto;
}

footer {
  width: 100%;
  background-color: purple;
  height: 100px;
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

#map {
  order: 2;
  flex-grow: 1;
  z-index: 5;
  min-height: 400px;
  position: relative;
  height: 100%;
  background-color: green;
}

#results {
  height: 0;
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
}

<header class="header">

</header>
<main>
  <div class="container">
    <div id="map">

    </div>
    <div id="results">
      <div class="extra-div">

      </div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer">

</footer>

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

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>

How to make div resize and scrollable between sibling divs

You could easily achieve something like this using flexbox:

<div id="sidenav">
  <div>Title</div>
  <div class="items">
    <div>item</div>
    <div>item</div>
    <div>item</div>
  </div>
  <div>Information</div>
</div>

#sidenav{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#sidenav .items{
  flex-grow: 1;
  overflow-y: auto;
}

https://codepen.io/Ploddy/pen/yLNaLyQ?editors=1100

---

Related Topics