1

I want this scrollable div to be the same height like the div next to it. This is what I got so far:

<div style="display: flex">
    <div>
       The height must be determined by this div.
    </div>
    <div style="overflow-y: scroll">
       This div has a lot of content.
       The height must follow the div next to me.
    </div>
</div>

Unfortunately the right div is always as big as its content. Both divs have dynamic content, so I don't know the exact height.

Tien Do Nam
  • 3,630
  • 3
  • 15
  • 30

2 Answers2

2

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>

Extra step (Set max-height if window resize)

When you set max-height by code - you should run this every time the browser resize (Safier approach for responsive sites) : How can I run a JavaScript function every time an HTML element is resized? 

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

resize();
window.onresize = resize;
.parent {
  display: flex;
  align-items: flex-start;
}

#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>

Extra reading:

Disable on mobile:

This max-height trick is not so useful on small screens. One solution (If window width higher than X run function). 

function resize() {
  /* set max-height by code */
  if (window.innerWidth > 960) {
    var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
    console.log("window width" + window.innerWidth +"px");
    document.getElementById("child_2").style.maxHeight = colHeight+"px";
  }
}

resize();
window.onresize = resize;

Do something if screen width is less than 960 px

Why CSS is not enough?

Keep in mind "max-height" without any set of overflow = "unresponsive" site.

Option 1 - left col is shorter than right col:

Set right col height to: max-height: 100px;

.parent {
  display: flex;
}

#child_1{
  border: 1px solid lightgray;
}
#child_2 {
  overflow-y: scroll;
  max-height: 100px;
  border: 1px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Very short content
    </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>

Option 2 - left col is longer than right col:

In this case, one option is to set max-height for the parent (Very Very unresponsive approach - because you should declare overflow for both cols) + Very weird UI:

.parent {
  display: flex;
  max-height: 100px;
}

#child_1{
  border: 3px solid orange;
  overflow-y: scroll;
}
#child_2 {
  overflow-y: scroll;
  border: 1px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </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>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
1

A simple solution would be to add a height or max-height to the parent element. That way both children have the same height at any width.

// HTML
<div id='container' class='parent'>
    <div id='content' class='child'>
       The height must be determined by this div.
    </div>
    <div class='child'>
       This div has a lot of content.
       The height must follow the div next to me.
    </div>
</div>

// CSS
.parent {
  display: flex;
  max-height: 70px; // remove if using JavaScript
}

.child {
  overflow: scroll;
}

Alternatively you could use JavaScript to determine the current height of your first child element and make that the height of the parent element.

ADDED:

// JS
const container = document.getElementById('container');
const content = document.getElementById('content');

const updateContainer = () => {
  let contentHeight = content.clientHeight + 'px';

  container.style.height = contentHeight;
}

updateContainer();

This is just an example. You would need to use an event listener to trigger the function.

NinaW
  • 638
  • 3
  • 7