Flex col 增长到与最大高度相同的高度答案

【问题标题】：Flex col grow to same height as largestFlex col 增长到与最大高度相同的高度
【发布时间】：2021-03-10 08:22:42
【问题描述】：

我已经尝试了几次不同的迭代，但无法弄清楚。

我正在使用 Bootstrap 4.3.1 并具有以下 div：

    <div class="d-flex flex-row align-items-center">
        <div class="col-8">
            <h3>A lovely header</h3>
            <ul>
                <li>Content</li>
                <li>Content</li>
            </ul>
        </div>
        <div class="col-4 img-wip">
            <p>Hello</p>
        </div>
    </div>

我有一个col-8 宽和第二个col-4 宽，第二个有一个由img-wip 类定义的背景图像。内容“Hello”很好地居中，但我无法让背景图像填充到与左侧 col-8 列中的内容定义的高度相同的高度。 col-4 框不会变大。

我试过height:100%，flex:1;，flex-grow:1;

但唯一会改变<p>hello</p> 周围背景图像高度的是特定的数字高度。我不想要那个，我想要col-8的高度定义的高度

这是可能的还是我误解了 flex 的工作原理？

.img-wip 类解析为：

.img-fill {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/resin_wip.jpg);
}

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

你对flexbox的理解确实是正确的，但是你有一些困惑。弹性项目的默认行为是cross-axis中的stretch。在您的情况下，您没有将内容放入具有 img-wip 类 (<div class="col-4 img-wip">... </div>) 的 div 中。

您正在 CSS 中设置 background-image。发生的事情是，flex-container 的高度被视为最大 flex-items 的高度（这是 Flexbox 中的默认行为）和在代码中，它是您的第一列，即 <div class="col-8">。

如果你为你的 col-8 div 添加更多内容，你会意识到你的图像会开始显示越来越多，或者如果你将 col-4 div 上的高度设置为图片，col-8 div的高度也会相应增加

另一种场景是直接在 col-4 div 中添加 img 标签。在这种情况下，您会看到，完整的图像被显示，并且 col-8 div 也采用了 col-4 div 的高度（正如在 flex-box 中所预期的那样）。

代码片段显示了这种行为：

.img-wip {
  background-image: url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS -->
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous"
        />

        <title>Hello, world!</title>
      </head>
      <body>
        <div class="d-flex flex-row align-items-center">
          <div class="col-8">
            <h3>A lovely header</h3>
            <ul>
              <li>Content</li>
              <li>Content</li>
            </ul>
          </div>
          <div class="col-4 img-wip">
            <p>Hello</p>
            <img
              src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png"
              alt=""
            />
          </div>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
  </body>
</html>

其他场景的代码：保持 HTML 代码不变，并在 CSS 下方添加。

CSS：

.img-wip {
 background-image: 
 url("https://res.cloudinary.com/diqqf3eq2/image/upload/v1583368215/phone-2_ohtt5s.png");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 min-height: 60vh;
}

【讨论】：