为什么row类使我的外部div适合大小

Question

我正在定义一些html，它有一个围绕图像的div框。我希望这个框能自动调整大小，以精确地框住图像。我发现以下代码给了我想要的：

<div class="container">
<div class="fill">
<div class="row">
<div class="my-box" style="height: 100%;">
<div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
</div>
</div>
</div>
</div>

JSFiddle此处

然而，当我尝试删除行类时，我突然失去了这种效果，但我不知道为什么。因此，删除行类后的完全相同的代码会导致框拉伸屏幕的整个宽度：

<div class="container">
<div class="fill">
<div>
<div class="my-box" style="height: 100%;">
<div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
</div>
</div>
</div>
</div>

所以我的问题是，在不需要使用row类的情况下，如何让我的框正确地框住我的图像？

Answer 1

因为行类显示：flex；

添加到填充类显示：flex；

像这样，最好在css文件中执行，但这里只是显示一个示例。

<div class="container">
<div class="fill" style="display: flex">
<div class="my-box" style="height: 100%;">
<div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
</div>
</div>
</div>

豌豆