为什么我的包装纸无法膨胀超过一定高度？

Question

尽可能简短地解释；我的包装纸里有两张照片。我希望这些图片保留 3:2 的比例。我希望图片将下一个对象进一步推到页面下方。当低于某个浏览器宽度时，这工作正常，但高于某个浏览器宽度时，它开始溢出包装器......？为什么包装 div 的高度停止增长？最大高度设置为：无；

链接

我觉得我在这里遗漏了一些明显的东西？

我的想法是img有一定的宽度，由浏览器宽度定义。因为我将比例定义为 3:2（肖像），所以它也应该自动计算高度。

我尝试给包装器一个 css 属性 * 最大高度：无！重要；*

但似乎不起作用。

Answer 1

我不知道我是否正确理解了这个问题，但是如果你想让菜单包装器在顶部，内容包装器在底部，500px以下，你必须删除position:sticky;来自带有一些媒体查询的菜单包装器。

Answer 2

尝试更新选择器的样式

.project-img-sidebyside-wrapper

，如下所示：

.project-img-sidebyside-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

这应该可以解决重叠的问题。我不知道如何使用 flex 来解决它。