Html 使网格项保持内容的高度，从而防止它们与其父级高度匹配-CSS

我有一个网格，其中两个网格项（列）中的一个有自己的网格。这个内部网格也是两列，用来存放博客文章

我希望这个内部网格中的文章不会拉伸父容器的整个高度，而是有效地从上到下堆叠，并且它们的高度限制为其内容的高度（即文本+给定的填充）。这可能吗

在示例代码中，它表示黄色

*{
框大小：边框框；
位置：相对位置；
}
身体{
保证金：0；
宽度：100%；
高度：100vh；
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
梅因先生{
背景：#fff；
宽度：50%；
身高：90%；
}
.内包装{
显示：网格；
网格间距：2rem；
网格模板列：重复（2，1fr）；
宽度：100%；
身高：100%；
填充：2rem；
}
.栏目{
背景：浅灰色；
}
.第1栏{
显示：网格；
网格模板列：重复（2，1fr）；
网格间距：1rem；
}
/*我希望将其高度限制为其内容高度的网格项*/
.文章{
填充：1rem；
背景：黄色；
保证金：0.5雷姆0；
}

乱数假文
乱数假文
乱数假文
乱数假文
添加
对齐内容：开始

.column-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  align-content: start;
}

对齐项目：flex开始？