Set max-height to the lowest height of the sibling div

Question

I know how to match the height of divs, which doesn't have much content, to match their height to the div which have most content using flex.

Now, I want to match the hight to the lowest content. For example, I need to add a scrollbar to the div which have more content and the max-height of that div should match the div which have very less content.

HTML

<div class="parent">
  <div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, illum sed? Ut consequatur repellat adipisci similique molestiae! Animi, sint alias quisquam saepe facilis voluptate reiciendis quod nobis ipsa vitae, laborum deleniti autem non! Veritatis, unde!</div>
  <div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quos fugit magnam voluptatum unde odit repudiandae dolor nisi, obcaecati ut. Officia distinctio expedita quod, nam, temporibus a dolore laboriosam itaque maiores est sed beatae unde vero repudiandae voluptatibus rem recusandae, corrupti modi non. Sint consequatur, debitis, necessitatibus rerum quo totam expedita sapiente adipisci atque animi hic corrupti voluptate, cupiditate perspiciatis aliquam nemo et deserunt nisi repudiandae? Consectetur amet sed praesentium necessitatibus perspiciatis aperiam, rerum deleniti mollitia iste eligendi exercitationem adipisci nostrum fugiat harum nisi quos ut sint quae aliquam maxime consequuntur distinctio id neque. Exercitationem accusamus, vel veniam quis sapiente repellendus vitae. Quis eveniet rem sapiente consectetur vero repudiandae quasi beatae quo voluptas corporis. Aliquid quaerat excepturi architecto quidem est error, iure officia modi quibusdam libero, facere enim iusto fugiat inventore accusamus vitae optio! Illo ducimus ratione molestiae deleniti voluptates quae, natus maxime adipisci a omnis harum pariatur ex optio dolor, delectus laudantium laborum modi. Officia explicabo pariatur reprehenderit! Eligendi quisquam, quod deserunt nemo cum repellat enim cupiditate aspernatur facere dolore fuga voluptas impedit odio, sapiente repellendus error eos perspiciatis non, praesentium rem debitis laborum quaerat? Ipsa, rem ullam perferendis voluptate dicta, eos sequi mollitia quos blanditiis voluptatem ratione placeat?</div>
</div>

CSS

  display: grid;
  max-width: 300px;
  grid-template-columns: 200px 100px;
}
.child {
  background: yellow;
  padding: 3px;
  border: 1px solid red;
}
.child:nth-child(2) {
  background: green;
  /* I want a max-height to this content to have a scrollbar and the height should match to left child   */
/*   max-height: 180px; */
  overflow: scroll;
}

https://codepen.io/asim-coder/pen/JxxvgK

Basically at least one of the child containers `should not` have an `overflow`? — varun agarwal, Feb 19 '19 at 07:35
do you know which one have least content? or you need to detect the one has least content dynamically? — jilykate, Feb 19 '19 at 07:51
here is an idea in case you know the element that will control the height: https://stackoverflow.com/a/48943583/8620333 — Temani Afif, Feb 19 '19 at 07:57

score 3 · Answer 1 · answered Feb 19 '19 at 07:49

.parent {
  display: grid;
  max-width: 300px;
  grid-template-columns: 200px 100px;
   /* you can set the row height in grid using (grid-auto-rows)  and you can get the all child in grid container with same height */
  grid-auto-rows: 230px;
}
.child {
  background: yellow;
  padding: 3px;
  border: 1px solid red;
}
.child:nth-child(2) {
  background: green;
  overflow: scroll;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, illum sed? Ut consequatur repellat adipisci similique molestiae! Animi, sint alias quisquam saepe facilis voluptate reiciendis quod nobis ipsa vitae, laborum deleniti autem non! Veritatis, unde!</div>
  <div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quos fugit magnam voluptatum unde odit repudiandae dolor nisi, obcaecati ut. Officia distinctio expedita quod, nam, temporibus a dolore laboriosam itaque maiores est sed beatae unde vero repudiandae voluptatibus rem recusandae, corrupti modi non. Sint consequatur, debitis, necessitatibus rerum quo totam expedita sapiente adipisci atque animi hic corrupti voluptate, cupiditate perspiciatis aliquam nemo et deserunt nisi repudiandae? Consectetur amet sed praesentium necessitatibus perspiciatis aperiam, rerum deleniti mollitia iste eligendi exercitationem adipisci nostrum fugiat harum nisi quos ut sint quae aliquam maxime consequuntur distinctio id neque. Exercitationem accusamus, vel veniam quis sapiente repellendus vitae. Quis eveniet rem sapiente consectetur vero repudiandae quasi beatae quo voluptas corporis. Aliquid quaerat excepturi architecto quidem est error, iure officia modi quibusdam libero, facere enim iusto fugiat inventore accusamus vitae optio! Illo ducimus ratione molestiae deleniti voluptates quae, natus maxime adipisci a omnis harum pariatur ex optio dolor, delectus laudantium laborum modi. Officia explicabo pariatur reprehenderit! Eligendi quisquam, quod deserunt nemo cum repellat enim cupiditate aspernatur facere dolore fuga voluptas impedit odio, sapiente repellendus error eos perspiciatis non, praesentium rem debitis laborum quaerat? Ipsa, rem ullam perferendis voluptate dicta, eos sequi mollitia quos blanditiis voluptatem ratione placeat?</div>
</div>

hope it will works for you

score 1 · Answer 2 · answered Feb 19 '19 at 08:29

You can get the height from your childs when you wrap the content with an inline-Element. In my example i use a span element.
Then i push all heights in an array and sort the array to get the lowest height. (see console.log)
Set a CSS-variable to the lowest height.

https://codepen.io/anon/pen/wNNXmO

const childs = Array.from(document.getElementsByClassName('child'));
const childHeights = [];

childs.forEach(child => {
  const childContent = child.innerHTML;
  child.innerHTML = `<span id="tmpid">${childContent}</span>`;
  childHeights.push(child.querySelector('#tmpid').offsetHeight);
})

console.log(childHeights.sort());
document.body.style.setProperty('--max-height', childHeights.sort()[0] + 1 + 'px');

:root {
  --max-height: 100px;
  /* initial height - before calc height is available */
}

.parent {
  display: grid;
  max-width: 300px;
  grid-template-columns: 200px 100px;
}

.child {
  background: yellow;
  padding: 3px;
  border: 1px solid red;
  max-height: var(--max-height);
  overflow: auto;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, illum sed? Ut consequatur repellat adipisci similique molestiae! Animi, sint alias quisquam saepe facilis voluptate reiciendis quod nobis ipsa vitae, laborum deleniti autem non!
    Veritatis, unde!</div>
  <div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quos fugit magnam voluptatum unde odit repudiandae dolor nisi, obcaecati ut. Officia distinctio expedita quod, nam, temporibus a dolore laboriosam itaque maiores est sed beatae unde vero
    repudiandae voluptatibus rem recusandae, corrupti modi non. Sint consequatur, debitis, necessitatibus rerum quo totam expedita sapiente adipisci atque animi hic corrupti voluptate, cupiditate perspiciatis aliquam nemo et deserunt nisi repudiandae?
    Consectetur amet sed praesentium necessitatibus perspiciatis aperiam, rerum deleniti mollitia iste eligendi exercitationem adipisci nostrum fugiat harum nisi quos ut sint quae aliquam maxime consequuntur distinctio id neque. Exercitationem accusamus,
    vel veniam quis sapiente repellendus vitae. Quis eveniet rem sapiente consectetur vero repudiandae quasi beatae quo voluptas corporis. Aliquid quaerat excepturi architecto quidem est error, iure officia modi quibusdam libero, facere enim iusto fugiat
    inventore accusamus vitae optio! Illo ducimus ratione molestiae deleniti voluptates quae, natus maxime adipisci a omnis harum pariatur ex optio dolor, delectus laudantium laborum modi. Officia explicabo pariatur reprehenderit! Eligendi quisquam, quod
    deserunt nemo cum repellat enim cupiditate aspernatur facere dolore fuga voluptas impedit odio, sapiente repellendus error eos perspiciatis non, praesentium rem debitis laborum quaerat? Ipsa, rem ullam perferendis voluptate dicta, eos sequi mollitia
    quos blanditiis voluptatem ratione placeat?</div>
</div>

I really liked the approach. But I wanted a CSS only solution. I think I'll use CSS position absolute approach — Asim K T, Feb 19 '19 at 08:37
Ah ok. You wrote something from "dynamic calculated" and used the javascript tag. :) But you are right, a CSS solution is always the better solution. — d-h-e, Feb 19 '19 at 08:41

score 0 · Answer 3 · answered Feb 19 '19 at 08:31

Heavily inspired from How can you set the height of an outer div to always be equal to a particular inner div?.

.parent {
  display: grid;
  max-width: 300px;
  grid-template-columns: 200px 100px;
}
.child {
  background: yellow;
  padding: 3px;
  border: 1px solid red;
  position: relative;
}
.child:nth-child(2) {
  background: green;
  overflow: scroll;
}
.wrap {
  position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, illum sed? Ut consequatur repellat adipisci similique molestiae! Animi, sint alias quisquam saepe facilis voluptate reiciendis quod nobis ipsa vitae, laborum deleniti autem non! Veritatis, unde!</div>
  <div class="child">
     <div class="wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quos fugit magnam voluptatum unde odit repudiandae dolor nisi, obcaecati ut. Officia distinctio expedita quod, nam, temporibus a dolore laboriosam itaque maiores est sed beatae unde vero repudiandae voluptatibus rem recusandae, corrupti modi non. Sint consequatur, debitis, necessitatibus rerum quo totam expedita sapiente adipisci atque animi hic corrupti voluptate, cupiditate perspiciatis aliquam nemo et deserunt nisi repudiandae? Consectetur amet sed praesentium necessitatibus perspiciatis aperiam, rerum deleniti mollitia iste eligendi exercitationem adipisci nostrum fugiat harum nisi quos ut sint quae aliquam maxime consequuntur distinctio id neque. Exercitationem accusamus, vel veniam quis sapiente repellendus vitae. Quis eveniet rem sapiente consectetur vero repudiandae quasi beatae quo voluptas corporis. Aliquid quaerat excepturi architecto quidem est error, iure officia modi quibusdam libero, facere enim iusto fugiat inventore accusamus vitae optio! Illo ducimus ratione molestiae deleniti voluptates quae, natus maxime adipisci a omnis harum pariatur ex optio dolor, delectus laudantium laborum modi. Officia explicabo pariatur reprehenderit! Eligendi quisquam, quod deserunt nemo cum repellat enim cupiditate aspernatur facere dolore fuga voluptas impedit odio, sapiente repellendus error eos perspiciatis non, praesentium rem debitis laborum quaerat? Ipsa, rem ullam perferendis voluptate dicta, eos sequi mollitia quos blanditiis voluptatem ratione placeat?</div></div>
</div>

Using an absolutely positioned child so that, it won't affect the document flow.

Set max-height to the lowest height of the sibling div

3 Answers3