Flex Column布局下让子元素居右且不破坏文档流的实现方法

现有Flex布局结构如下：

• 父容器.layout-parent设置display:flex、flex-direction:column
• 子容器.child-container包含蓝色.child-one（固定宽300px）和红色.child-two（固定宽150px），容器内使用justify-content:space-between
• 下方还有紫色.main-element和橙色.bottom-element

需求：

1. 紫色.main-element居右，宽度与红色.child-two接近
2. 蓝色.child-one延伸至橙色.bottom-element所在的宽度位置

限制：必须使用Flex布局实现，不能改用Grid，且无法将紫色元素移入红色元素所在容器内

提供两种无需修改HTML结构的简便Flex实现方案：

方案一：利用Flex自动margin与弹性宽度 #

1. 给.layout-parent添加align-items: flex-start，避免子元素默认拉伸占满父容器宽度
2. 将.child-one的固定宽度改为flex: 1，同时给.layout-parent设置min-width: 450px（即原.child-one+.child-two的宽度总和），确保它能延伸至.bottom-element的宽度位置
3. 给.main-element设置margin-left: auto实现居右，同时指定宽度匹配.child-two

核心CSS代码：

.layout-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 450px;
}

.child-one {
  width: auto;
  flex: 1;
}

.main-element {
  margin-left: auto;
  width: 150px;
}

方案二：嵌套Flex容器模拟双列布局 #

1. 新增一个.top-group容器，将.child-container和.main-element包裹进去，给这个容器设置display:flex、justify-content: space-between、width: 100%
2. 给.child-container设置flex: 1，让它的宽度自动延伸至父容器最大可用宽度（即.bottom-element的宽度）
3. 给.child-one设置width: 100%，使其占满.child-container的宽度；.main-element直接设置宽度匹配.child-two

核心CSS代码：

.top-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.child-container {
  flex: 1;
}

.child-one {
  width: 100%;
}

.main-element {
  width: 150px;
}

两种方案均基于Flex原生属性实现，无需调整原有HTML结构，完全符合需求限制。

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