移除Flexbox元素多余空白：响应式布局适配问题

需要实现三个元素的响应式布局：

• 移动端：三个元素均为全屏宽度，垂直排列（当前已实现）。
• 桌面端：左侧Section A下方紧随Section B，Section C位于右侧；但当前布局下Section A下方存在多余空白，不符合预期。

核心问题是原flex-wrap布局中，Section B的高度导致Section A下方出现空白。只需调整HTML结构，将Section A和Section B放入同一个垂直flex容器，即可实现左侧上下堆叠、右侧单独列的布局：

修改后的代码 #

CSS（保留原有样式，无需改动） #

.flex{
  display: flex
}

.flex-col{
  flex-direction: column
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}

.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity))
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity))
}

@media (min-width: 640px){
  .sm\:w-4\/12{
    width: 33.333333%
  }

  .sm\:w-8\/12{
    width: 66.666667%
  }

  .sm\:flex-row{
    flex-direction: row
  }

  .sm\:flex-wrap{
    flex-wrap: wrap
  }
}

HTML（调整结构） #

<div class="flex flex-col sm:flex-row">
  <!-- 左侧垂直容器：包含Section A和Section B -->
  <div class="flex flex-col sm:w-8/12">
    <div class="bg-red-50">Section A</div>
    <div class="bg-purple-50">Section B
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    </div>
  </div>
  <!-- 右侧Section C -->
  <div class="bg-blue-50 sm:w-4/12">Section C</div>
</div>

效果说明 #

• 移动端：外层flex-col确保所有容器和子元素自动占满全屏宽度，保持原有正确布局。
• 桌面端：外层sm:flex-row触发左右容器并排，左侧容器用flex-col让A和B垂直堆叠，占据8/12宽度；右侧Section C占据4/12宽度，完全符合预期布局，同时消除了Section A下方的空白。

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