How to Scroll a Div Content Between Another 2 Flex Divs

Create a scrolling div between two divs

Is this what you are looking for?

<div id="chat_icon" style="position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%" ;>  <div class="collapse" id="iframe_holder">    <div id="chat">      <div class="row-1" id="header" style="height: 20%">        <span>Live chat</span>      </div>      <div class="row-1" id="message" style="overflow-y: scroll; height: 120px">        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>        <ul id="messages" class="list-group">23232323</ul>      </div>      <div class="row-1" id="footer" style="height: 20%">        <input type="text" id="myMessage" placeholder="Type a message">        <a id="sendbutton" href="#" class="btn btn-success"><span class="glyphicon glyphicon-send"></span> </a>      </div>    </div>  </div>  <button class="btn btn-lg btn-circle" data-target="#iframe_holder" data-toggle="collapse"><i class="glyphicon glyphicon-send"></i></button></div>

multiple scrolling divs in flexbox layout with constrained parent container?

This seems to work properly:

.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box2 {
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
}

.FCpanel {  overflow: hidden;  border-radius: 0.5em;  margin-bottom: 1em;}.FCpanel > .mainFlex {  background: #ebf6fd;  box-shadow: 0em 0.125em 0.5875em #666;  font-family: "OpenSans-Bold", "Open Sans", sans-serif;  padding: 0px;  border: solid 1px #428cca;  display: flex;  flex-direction: column;  flex-wrap: nowrap;  justify-content: flex-start;  align-content: flex-start;  align-items: stretch;  height: 516px;  color: #fff;  font-size: 1.4em;}.FCpanel > .mainFlex > .box1 {  max-height: 10%;  overflow: auto;  background-color: #f00;}.FCpanel > .mainFlex > .box2 {  background-color: #0f0;  max-height: 40%;  overflow: auto;}.FCpanel > .mainFlex > .box3 {  flex: 1;  overflow: auto;  background-color: #00f;}

<div class="container">  <div class="row">    <div class="FCpanel">      <div class="mainFlex col-xs-8">        <div class="box1">This is some text</div>        <div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div>        <div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text          sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his          is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div>      </div>      <div class="mainFlex col-xs-2 col-xs-offset-1"></div>    </div>  </div></div>

How do I set two div which are side by side to scroll independently?

You had the two child containers .left and .right scrolling vertically on overflow correctly but the two nested divs in the right container were not scrolling independently of the parent .right. To fix that, we can add overflow: auto to both .first and .second and then to align them side by side in a row format give the .right container display: flex.

Also, the .first container was a flexbox and specifically a column layout with flex-direction: column, this column declaration is what was causing the text to overflow out the top of the .right container when I was testing. After removing that and replacing the explicit width's for .first and .second with max-width, things are looking as expected and the containers .first and .second are able to be scrolled independently of their parent .right while the original two containers are still scrollable too. You can also set an explicit height on the .first or .second containers to control when their content should scroll.

.main{
    display: flex;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    width: auto;
    height: 100%;
    background: #f7f7f7;
    margin: 0 auto;
    overflow: auto;
}

.left{
    flex-grow: 1;
    height: 90vh;
    position: relative;
    max-width: 20ch; /* Remove this, just for demo */
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.right{
    flex-grow: 1;
    display: flex;
    height: 90vh;
    position: relative;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #000;
}

.first{
    display: flex;
    flex-direction: column;
    max-width: 900px;
    overflow: auto;
}

.second{
    max-width: 467px;
    background-color: #2b2f3e;
    overflow: auto;
}

<div class="main">
   <div class="left">
     <p>Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text Some text Some text Some textSome text Some text Some text Some text</p>
   </div>
   <div class="right">
     <div class="first"><p>Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text<p><p>Some other text</p></div>
     <div class="second">Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text Some really long text</div>
   </div>
</div>

Place a scrollable div between two vertical divs

By using Flexbox you can have dynamic height on both top and bottom

Set display: flex on the wrapper, give it a height and then set flex-grow: 1 on the middle.

For the button I used absolute positioning.

I also changed your id's to classes, which is the recommend way to assign CSS rules

html, body {  margin: 0}.wrapper {  display: flex;  flex-direction: column;  height: 100vh;  width: 60%;}.middle {  flex-grow: 1;  overflow: auto;}.top { background: lightgreen;}.bottom { position: relative; background: lightblue;}.button { position: absolute; top: -70px; right: 50px; background: lightgray; border-radius: 50%; padding: 20px 8px;}

<div class="wrapper">  <div class="top">top</div>  <div class="middle">    Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br>    Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br>  </div>  <div class="bottom">  bottom    <div class="button">button</div>  </div></div>

How get 2 divs same height using scroll-y and flexbox

First read her the diff between :
overflow-y: scroll to auto (In your case its better to use auto).
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

One more pre-step align-items: flex-start; (Like this the height of the col will not match).

.parent {
  display: flex;
  align-items: flex-start;
}

How to disable equal height columns in Flexbox?

"real" solution (for all cases) - only by Javascript

/* set max-height by code */var colHeight = document.getElementById("child_1").getBoundingClientRect().height;console.log(colHeight);document.getElementById("child_2").style.maxHeight = colHeight+"px";

.parent {  display: flex;}
#child_1{  border: 3px solid orange;}#child_2 {  overflow-y: auto;  border: 2px solid violet;}

<main class='parent'>  <div id="child_1">    <p>      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases     </p>    <p>      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases     </p>  </div>  <div id="child_2">    <p>      This div has a lot of content.      The height must follow the div next to me.    </p>    <p>      This div has a lot of content.      The height must follow the div next to me.    </p>    <p>      This div has a lot of content.      The height must follow the div next to me.    </p>    <p>      This div has a lot of content.      The height must follow the div next to me.    </p>    <p>      This div has a lot of content.      The height must follow the div next to me.    </p>  </div></main>

how to scroll two divs independently using css

Add scroll to independent class and also you have to set at what max height you want the content to have scroll, for the example below I have used 400px as the height, post that height you will have scroll.

Bonus tip

When using flex for direction, flex-direction:row; is default you no need to specifically use that.

.fixed-box {  position: fixed;  width: 100%;}
.sticky-header {  position: fixed;}
.inner-window {  border: 1px solid red;  display: flex;  flex-direction: row;}
.first-column {  overflow-y: auto;  height: 400px;}
.second-column {  overflow-y: auto;  height: 400px;}

<div class="row h-100">

  <div class="col-3">
    <div class="col-9 bg-warning h-100 right-window">

      <div class="inner-window">        <div class="first-column">          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>          <p>This is first column</p>
        </div>        <div style="background: green" class="second-column">          <p>This is second column</p>          <p>This is second column</p>
          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>          <p>This is second column</p>
        </div>      </div>    </div>  </div>

add scrollable Divs inside flexbox Divs

I have found way, where we do not need to setup a height on Child divs to make it scrollable.

body {  height: 100vh;  width: 100vw;  display: flex;  flex-direction: column;  padding: 0;  margin: 0;}.body-container {  flex: 1: background: #fff;  padding: 10px;  box-sizing: border-box;  overflow: hidden;  display: flex;}.left-panel {  background: red;  flex: 1}.right-panel {  background: green;  flex: 3;  display: flex;  flex-direction: column;}.content-container {  flex: 1;  display: flex;  flex-direction: column;}.fixed-header {} .scrollable-content {  flex: 1;  overflow-x: hidden;  overflow-y: auto;}

<div class="body-container">  <div class="left-panel">    <p>My Left Panel</p>  </div>  <div class="right-panel">    <p>Test My Right Panel</p>    <div class="content-container">      <div class="fixed-header">        <p>Fixed header</p>        <p>Fixed header</p>        <p>Fixed header</p>      </div>
      <div class="scrollable-content">        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>        <p>Scrollable</p>      </div>    </div>  </div></div>

Scroll div next to other divs

You can add a scroll to the products area like this

.product-container {
  height: 100vh; /* limit it to the size of your window */
  overflow: auto; /* add scroll when necessary */
}

See the example here:
https://codepen.io/oriadam/pen/BrWqNw

Two divs one scrolls and another is static

updated fiddle

#right-bar {
  position: relative;
  background-color: green;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  //added
  width: 40%;
  height: 100%;
}

---

Related Topics