Two columns with one scrollable

Question

I am bit lost ... I want to make 2 columns where one the left column is scroll-able depending on the size of the right column Here is my example in jsfiddle : http://jsfiddle.net/6f3bwrh7/

In my case I want the red column (that has the scroll) to get the same height as the green column I tried something like this :

  overflow:auto;

But I think I am totally wrong

Answer 1

If you'd like two columns, only one scrollable you could use position: fixed on one of the columns. Like this:

body {
  margin: 0;
  padding: 0;
}

.left {
  width: 50%;
}

.left {
  position: fixed;
}

.right {
  padding-left: 50%;
}

.left img {
  height: auto;
  max-width: 100%;
  outline: 0;
}

<div class="left">
  <p>
    Hello
  </p>
</div>
<div class="right">
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
</div>

Answer 2

Try to change this :

overflow: auto;

to this

overflow-y: scroll;

css

Answer 3

its possible to make the divs the same height, BUT, according to which one has the higher height.

you could add flex to the parent container and the 2 divs will be of the same height. but in your case, it'll be the height of the left column, because it has the greater height out of the 2.

#wrapper {
  display: flex; /* equal height of the children */
}

Otherwise, I would recommend using javascript to get the 'scrollheight' of the right div, and apply it to the left div.

Answer 4

To make both columns the same height you can either use display:grid; or display:flex; on your #wrapper.

But as I understand it you want to set the height of the bigger element to the one of the smaller element. For that you have to use javascript or use a fixed height in your css.

Answer 5

check output:

#left-block{
  float:left;
  width:30%;
  background-color:red;
  overflow:auto;
}

#right-block{
  float:right;
  width:70%;
  background-color:green;
}

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
}

<div id='wrapper' class='row'>
  <div id='left-block' class='col'>
    <div class='elmt'>
    elmt 1
    </div>
    <div class='elmt'>
    elmt 2
    </div>
    <div class='elmt'>
    elmt 3
    </div>
     <div class='elmt'>
    elmt 4
    </div>
    <div class='elmt'>
    elmt 5
    </div>
    <div class='elmt'>
    elmt 6
    </div>
        <div class='elmt'>
    elmt 7
    </div>
    <div class='elmt'>
    elmt 8
    </div>
    <div class='elmt'>
    elmt 9
    </div>
  </div>
  <div id='right-block' class='row'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas minus commodi repellat voluptatum odit quos excepturi fugiat quia distinctio harum pariatur inventore possimus minima sequi, enim eius, cupiditate, perferendis accusantium.
  </div>
  <div style='clear:both'>
  
  </div>
</div>