Html 如何在flex属性下完美匹配内容？

我有两个名为

.grid.left

和

.grid.right

的容器。每个

.grids

，尤其是

.grid.left

都有一些图像动态方式，这些

.grids

由另一个名为

.gallery

的div包装

问题是，当我给每个图像框留边距时，浏览器会在

.gallery

中留下一些间隙，如下所示：

我的期望是从我的

.gallery

中消除这些间隙，并使图像完全适合，无论我在图像上设置了多少

边距

我打算把
页边距设置为
，以便画廊看起来更好。我希望保留这些边距，并展开
.grid.right
的图像，使其仅适合图像和
.outer
div之间

有没有合适的方法来解决这个问题


片段：


*{
保证金：0；
填充：0；
}
分区，
部分{
位置：相对位置；
}
.画廊{
宽度：1200px；
身高：100%；
边框：1px纯黑；
框大小：边框框；
}
.文章{
宽度：100%；
身高：100%；
显示器：flex；
柔性流：行；
对齐项目：居中；
}
.电网{
身高：100%；
}
.左{
宽度：60%；
}
.插图内容{
宽度：100%；
身高：50%；
}
.顶{
边缘底部：1rem；
背景图像：url（'https://imgur.com/3ozQvk9.jpg');
垫底：50%；
}
.底部{
显示器：flex；
柔性流：行；
}
.内部内容{
宽度：50%；
}
.首先{
背景图像：url（'https://imgur.com/tOMRVDi.jpg');
垫底：50%；
保证金权利：.5rem；
}
.第二{
背景图像：url（'https://imgur.com/4oewNdx.jpg');
垫底：50%；
左边缘：.5rem；
}
.对{
宽度：40%；
背景图像：url（'https://imgur.com/7gB1jHR.jpg');
垫底：60%；
对齐内容：拉伸；
左边距：1 em；
}
.img{
显示：块；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
您好，如果我说的没错，您只想消除间隙并扩展图像。
你可以检查一下这个


*{
保证金：0自动；
填充：0自动；
}
分区{
位置：相对位置；
}
.画廊{
宽度：1200px；
身高：100%；
边框：1px纯黑；
框大小：边框框；
}
.文章{
宽度：100%；
身高：100%；
显示器：flex；
柔性流：行；
对齐项目：居中；
}
.电网{
身高：100%；
}
.左{
宽度：60%；
}
.插图内容{
宽度：100%；
身高：50%；
}
.顶{
背景图像：url（'https://imgur.com/3ozQvk9.jpg');
垫底：50%；
}
.底部{
显示器：flex；
柔性流：行；
}
.内部内容{
宽度：50%；
}
.首先{
背景图像：url（'https://imgur.com/tOMRVDi.jpg');
垫底：50%；
}
.第二{
背景图像：url（'https://imgur.com/4oewNdx.jpg');
垫底：50%；
}
.对{
宽度：40%；
背景图像：url（'https://imgur.com/7gB1jHR.jpg');
垫底：60%；
对齐内容：拉伸；
}
.img{
显示：块；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
问题在于如何管理图像库中右侧
元素的高度：


忽略设置
高度：100%
（由于
网格
类）和
填充底部
-您可以通过向
右侧
元素添加
高度：自动
来覆盖此设置

从
文章
元素中删除
对齐项目：居中
，并允许默认的
对齐项目：拉伸
接管-这将拉伸并匹配
右侧
元素与
左侧
的高度


请参见下面的演示：


*{
保证金：0；
填充：0；
}
分区，
部分{
位置：相对位置；
}
.画廊{
宽度：1200px；
身高：100%；
边框：1px纯黑；
框大小：边框框；
}
.文章{
宽度：100%；
身高：100%；
显示器：flex；
柔性流：行；
/*对齐项目：居中*/
}
.电网{
身高：100%；
}
.左{
宽度：60%；
}
.插图内容{
宽度：100%；
身高：50%；
}
.顶{
边缘底部：1rem；
背景图像：url（'https://imgur.com/3ozQvk9.jpg');
垫底：50%；
}
.底部{
显示器：flex；
柔性流：行；
}
.内部内容{
宽度：50%；
}
.首先{
背景图像：url（'https://imgur.com/tOMRVDi.jpg');
垫底：50%；
保证金权利：.5rem；
}
.第二{
背景图像：url（'https://imgur.com/4oewNdx.jpg');
垫底：50%；
左边缘：.5rem；
}
.对{
宽度：40%；
背景图像：url（'https://imgur.com/7gB1jHR.jpg');
/*垫底：60%；
对齐内容：拉伸*/
左边距：1 em；
高度：自动；/*已添加*/
}
.img{
显示：块；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
找到了解决方案。根据文章，我需要添加
flex-shrink:0在
中。