我已经尝试了几个不同的迭代，但就是搞不清楚。
我使用的是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；
但是唯一会改变 hellocol-8的高度定义的高度
这是可能的，还是我误解了flex的工作原理？
.img-wip类解析为:
.img-fill {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/resin_wip.jpg);
}
如果你在课堂上加上“H-100”，它管用吗？
class=“COL-8 H-100”class=“COL-4 H-100”
您对flexbox的理解确实是正确的，但您有一些困惑。flex-items的默认行为是跨轴拉伸。在您的示例中，您没有将内容放入div中的img-wip类(
你正在CSS中设置背景图像。所发生的情况是，flex-container的高度被视为最大的flex-items的高度（这是Flexbox中的默认行为），在代码中，它是您的第一列，即 如果您添加更多的内容到您的col-8 div，您将意识到您的图像将开始显示越来越多或设置一个高度在col-4 div到图像的高度，col-8 div的高度也将 另一种情况是直接在col-4 div中添加img标记。在这种情况下，您将看到，显示的是完整的图像，并且col-8 div也取col-4 div的高度（正如在flex-box中所预期的那样）。 代码段显示了此行为: null。
.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>
