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

Question

我知道如何匹配div的高度，它没有太多的内容，以匹配他们的高度与使用flex的内容最多的div。

现在，我希望将hight与最低内容相匹配。例如，我需要向div添加一个滚动条，它具有更多内容，并且该div的max-height应该与内容非常少的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. 当您使用内联元素包装内容时，您可以从您的孩子获得高度。在我的例子中，我使用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>

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