如何使两个Flex列的行为类似于CSS中的表？

我不相信我所要求的在纯CSS中是可以实现的，但我还是希望有另一种方法或者我缺少的东西

以下是使用flexbox实现的当前布局的图示：

这很好用。但是，如果我在“column in column”div下面的第1列中添加更多内容，然后我也想在第2列中添加内容，但我希望它与我刚刚添加到第1列的项目占据相同的垂直空间，那会怎么样？换句话说，就好像一切都是一个表，而那些项目在相邻表单元格的同一行中

这是布局表单时的常见问题，例如，您希望在列中对项目（城市、州、邮政编码）进行分组，并且希望在表单中并排跟踪项目

（我刚刚在列周围设置了灰色边框，以帮助描述标记，但在多列表单布局中，它们通常不是列之间的边框）

因此，最终结果将如下图所示：

以下是演示的结构化HTML：

.container{
显示器：flex；
}
.栏目{
柔性生长：1；
/*基于子内容填充父空间*/
弹性：110；
/*无论子内容如何，都要均匀填充父空间*/
}
.column.row{
显示器：flex；
柔性包装：包装；
}
.column.row div{
柔性生长：1；
}
.column.row h2{
宽度：100%；
}

第1列的布局在这里
表单字段
表单字段
表单字段
列中列
表单字段
表单字段
表单字段
新增表格栏位“Y”
第2列的布局在这里
表单字段
表单字段
表单字段
表单字段应与表单字段“Y”一起跟踪，但如何跟踪？

您可以将

列

元素设置为柔性容器（即，将

显示：柔性

也应用于

列

元素），其具有

柔性方向：列和应用
页边距顶部：自动
到第二列的最后一个
div
，将其移动到容器底部：


.container{
显示器：flex；
}
.栏目{
flex grow:1；/*根据子内容填充父空间*/
flex:1 1 0；/*无论子内容如何，都会均匀填充父空间*/
显示器：flex；
弯曲方向：立柱；
}
.column.row{
显示器：flex；
柔性包装：包装；
}
.column.row div{
柔性生长：1；
}
.column.row h2{
宽度：100%；
}
.column>div:最后一个子项{
页边顶部：自动；
}

第1列的布局在这里
表单字段
表单字段
表单字段
列中列
表单字段
表单字段
表单字段
新增表格栏位“Y”
第2列的布局在这里
表单字段
表单字段
表单字段
表单字段应与表单字段“Y”一起跟踪，但如何跟踪？
我突然想到，我可以选择在第一个容器元素的下面添加另一个容器元素，这实际上会在需要跟踪verticallyNo的元素的开头创建一个等价的表行……这就是子网格的作用-我对你的答案投了赞成票。页边顶部是一种巧妙的技巧。但是，如果我需要在第1列“Y”元素下面添加另一个表单元素，该怎么办？在这种情况下，相邻字段不再跟踪，因为第2列的最后一个子项总是移动到容器的底部。到目前为止，我认为唯一的答案是启动一个新容器，使其等同于一个新表行。