如何使用scroll-y和flexbox使2个div具有相同的高度

Question

我希望这个可滚动的 div 与它旁边的 div 具有相同的高度。这是我到目前为止得到的：

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

不幸的是，正确的 div 总是和它的内容一样大。两个 div 都有动态内容，所以我不知道确切的高度。

Answer 1

首先读她之间的差异： overflow-y: scroll到auto（在你的情况下最好使用自动）。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow又一个预处理步骤align-items: flex-start;（像这样，山口的高度将不匹配）。.parent {   display: flex;   align-items: flex-start; }“真正的”解决方案（适用于所有情况）- 仅通过 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>额外步骤（如果窗口大小调整则设置最大高度）当您max-height通过代码设置时 - 您应该在每次浏览器调整大小时运行它（响应式网站的更安全方法）：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>在移动设备上禁用：这个max-height技巧在小屏幕上不太有用。一种解决方案（如果窗口宽度高于 X 运行函数）。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;为什么 CSS 还不够？请记住“最大高度”没有任何溢出=“无响应”站点的设置。选项 1 - 左栏比右栏短：将右栏高度设置为：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>选项 2 - 左栏比右栏长：max-height在这种情况下，一个选项是为父级设置（非常非常无响应的方法 - 因为您应该为两个列声明溢出）+非常奇怪的 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>

Answer 2

一个简单的解决方案是将height或添加max-height到父元素。这样两个孩子在任何宽度下都具有相同的高度。// HTML<div id='container' class='parent'>&nbsp; &nbsp; <div id='content' class='child'>&nbsp; &nbsp; &nbsp; &nbsp;The height must be determined by this div.&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class='child'>&nbsp; &nbsp; &nbsp; &nbsp;This div has a lot of content.&nbsp; &nbsp; &nbsp; &nbsp;The height must follow the div next to me.&nbsp; &nbsp; </div></div>// CSS.parent {&nbsp; display: flex;&nbsp; max-height: 70px; // remove if using JavaScript}.child {&nbsp; overflow: scroll;}或者，您可以使用 JavaScript 来确定第一个子元素的当前高度，并将其设置为父元素的高度。添加：// JSconst container = document.getElementById('container');const content = document.getElementById('content');const updateContainer = () => {&nbsp; let contentHeight = content.clientHeight + 'px';&nbsp; container.style.height = contentHeight;}updateContainer();这只是一个例子。您需要使用事件侦听器来触发该函数。