将 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. 当您使用内联元素包装内容时，您可以从您的孩子那里获取高度。在我的示例中，我使用 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>

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