如何使嵌套结构中首个子元素占满宽度并实现指定分栏布局？

原本在单一Flex容器中，我们可以通过以下方式实现首个子元素占满整行，其余元素并排的效果：

.container {
  display: flex;
  flex-wrap: wrap;
}
.container :first-child {
  width: 100%;
}
.container > *:not(:first-child) {
  flex-grow: 1;
}

但当结构拆分（h1和<p>位于左侧容器，<img>位于右侧容器）时，要实现h1通栏、<p>与<img>并排的效果，可以用以下两种方案：

方案一：CSS Grid 布局 #

给最外层容器设置Grid布局，通过区域划分指定元素位置：

.outer-container {
  display: grid;
  grid-template-areas: 
    "title title"
    "text image";
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

h1 {
  grid-area: title;
  width: 100%;
}

.left-column p {
  grid-area: text;
}

.right-column img {
  grid-area: image;
  object-fit: cover;
}

方案二：嵌套 Flex 布局 #

通过外层垂直Flex+内层横向Flex的组合实现：

.outer-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.content-row {
  display: flex;
  gap: 1rem;
}

h1 {
  width: 100%;
}

.content-row p,
.content-row img {
  flex-grow: 1;
}

关键逻辑 #

两种方案的核心都是将h1单独置于整行，再让<p>和<img>所在容器形成横向排列，以此达成和原单一容器结构一致的视觉效果。

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