设置flex-grow:1后Flex项目高度不等？原因及解决方法

希望左侧容器内的两个元素拥有相同高度，已为其设置flex-grow:1属性，但它们的高度仍不一致。请问这是什么原因？该如何实现等高效果？

相关代码如下：

CSS代码 #

:root {
  --primary-color1: #262424;
  --primary-color2: #fff;
  --secondary-color: #f3f3f3;
  --link-color: rgb(101, 101, 195);
  --link-hover-color: rgb(2, 2, 222);
}

p {
  text-align: center;
  margin-top: 10px;
}

.left-right-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  padding: 10px;
}

.left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; */
  width: 50%;
  padding: 10px 10px 10px 0;
}

.left>div:first-child {
  margin-bottom: 10px;
}

.right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  padding: 10px 0 10px 10px;
  /* -webkit-box-sizing: border-box;
            box-sizing: border-box; */
}

.left>div,
.right>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: var(--secondary-color);
  padding: 10px;
  margin: 10px auto 10px 0px;
  width: 100%;
  max-width: 750px;
  text-align: center;
  border: 1px solid var(--primary-color1);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.left-right-container li,
.left-right-container dt,
.left-right-container dd {
  text-align: left;
}

.left-right-container dt {
  font-weight: bold;
}

@media screen and (max-width: 850px) {
  .left-right-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .left,
  .right {
    width: 100%;
    padding: 0;
  }
}

HTML代码 #

<div class="left-right-container">
  <div class="left">
    <div>
      <h4>lorem</h4>
      <p>Lorem ipsum doler sit amet</p>
    </div>
    <div>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum doler sit amet</p>
      <ol>
        <li>Lorem ipsum dolor sit amet, conseteturS</li>
        <li>Lorem ipsum dolor sit amet, consetetur</li>
        <li>Lorem ipsum dolor sit amet, consetetur</li>
        <li>Lorem ipsum dolor sit amet, consetetur</li>
      </ol>
    </div>
  </div>
  <div class="right">
    <div>
      <h4>Lorem ipsum dolor</h4>
      <p>Lorem ipsum dolor sit amet, consetetur</p>
      <dl>
        <dt>Lorem ipsum</dt>
        <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd>
        <dt>Lorem ipsum</dt>
        <dd>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          <br><br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd>
      </dl>
    </div>

  </div>
</div>

效果截图 #

flex-grow:1的作用是分配容器的剩余空间，而非强制元素高度相等。默认情况下flex-basis:auto（元素初始高度由自身内容决定），所以flex-grow只是在内容高度的基础上瓜分剩余空间，最终元素总高度=内容高度+分配的剩余空间，内容高度不同的话，最终高度自然有差异。

有两种简单可靠的实现方式：

方法一：修改flex属性为flex:1 #

将左侧子元素的flex-grow:1替换为flex:1，flex:1是flex-grow:1; flex-shrink:1; flex-basis:0%的缩写，它会将元素的基准高度设为0，让两个子元素平分父容器（.left）的总高度，实现严格等高：

修改后的CSS片段：

.left>div,
.right>div {
  /* 替换原有的flex-grow:1 */
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /* 其他样式保持不变 */
}

方法二：改用Grid布局 #

将.left的flex布局改为Grid布局，通过grid-template-rows: 1fr 1fr让两个子元素自动平分高度：

修改后的.left样式：

.left {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px; /* 替代原来的margin-bottom:10px */
  width: 50%;
  padding: 10px 10px 10px 0;
}

同时需要删除.left>div:first-child的margin-bottom:10px，避免间距重复。

内容的提问来源于stack exchange，提问作者user19712456