将max-height设置为兄弟div的最低高度

Question

我知道如何匹配内容不多的div的高度，以使用flex将其高度匹配到内容最多的div。

现在，我想将最高的内容匹配到最低的内容。例如，我需要向具有更多内容的div添加一个滚动条，并且该div的最大高度应与具有很少内容的div相匹配。

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

Answer 1

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

希望它对您有用

Answer 2

1. 使用inline-Element包装内容时，您可以从孩子那里得到身高。在我的示例中，我使用了span元素。

2. 然后我将所有高度推入数组，并对数组进行排序以获得最低高度。 （请参阅console.log）

3. 将CSS变量设置为最低高度。

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>

Answer 3

受到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>

使用绝对定位的子对象，这样就不会影响文档流。