如果我设置 flex-grow: 1，为什么 Flex 项目的高度不一样？

Question

这是 jsfiddle 链接 https://jsfiddle.net/n7ajthL2/4/

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>

比如说，我希望左侧的 2 个元素具有相同的高度。我添加了 flex-grow: 1 但较高和较低的元素高度不同。为什么？如何使它们的高度相同？

Answer 1

我建议使用 grid 而不是 flexbox ，在下面的示例中，我可以用很少的行来实现您想要的结果。 为此使用 Flexbox 需要做更多的工作。

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#blue {
  background-color: blue;
}

.square {
  padding: 1rem;
}

.left {
  display: grid;
  gap: 1rem;
  grid-template-rows: 1fr 1fr;
}

.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

<div class="container">
  <div class="left">
    <div id="red" class="square">
      <h4>lorem</h4>
      <p>Lorem ipsum doler sit amet</p>
    </div>
    <div id="green" class="square">
      <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 id="blue" class="square">
    <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>