flex纵向布局下inline-block失效，如何让指定两子元素并排同行

给col2、col3设置display: inline-block完全无效，根源在于：

• 父容器#main-container采用了display: flex + flex-direction: column的纵向flex布局，所有直接子元素作为flex item，其设置的display属性会被浏览器强制块级化，你写的inline-block会被直接忽略。
• 纵向排列的flex子项默认会撑满父容器的全部横向宽度，因此无论怎么设置行内显示属性，col2、col3都会各自单独占一行，无法并排。

因为实际开发中无法插入额外的包裹元素把col2、col3包为单独一行容器，因此最适配的方案是将父容器切换为CSS Grid布局，通过跨列规则直接控制子项排布，全程无需修改原有HTML结构：

第一步：调整父容器布局配置 #

替换原#main-container的flex配置为grid规则，保持原有左对齐、内边距的视觉效果：

#main-container {
    display: grid;
    /* 设置两列轨道：第一列宽度随内容自适应，第二列占满剩余宽度 */
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    padding: 8px 24px;
}

第二步：为对应子项添加跨列规则 #

通过grid的跨列属性，让需要单独占一行的col1、col4占满整行，让col2、col3自然落在第二行的两个列位上：

/* col1：单独占第一行，跨满两列 */
#col1 {
    grid-column: 1 / -1;
    background: blue;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
}

/* col2：移除无效的inline-block设置，自然落在第二行第一列 */
#col2 {
    background: yellow;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
}

/* col3：移除无效的flex:1、inline-block设置，自然落在第二行第二列 */
#col3 {
    background: green;
    min-height: inherit;
}

/* col4：单独占第三行，跨满两列 */
#col4 {
    grid-column: 1 / -1;
    background: indigo;
    min-height: inherit;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
}

这套实现不需要改动任何HTML结构，完全适配mat-table的开发场景——仅通过CSS控制原有单元格的排布规则，不会破坏表格组件自带的样式计算逻辑，最终就能实现「col1单独成行、col2与col3并排占第二行、col4单独成行」的目标布局效果。

内容的提问来源于stack exchange，提问作者mkHun