如何让橙色组件固定于滚动容器底部并随绿色内容动态上伸？

调整后各组件样式： #

• 蓝色组件（父容器）：

height: "95.4vh",
backgroundColor: "#f0f0f0",
display: "flex",
flexDirection: "column"

移除原有的overflow: auto，将滚动逻辑转移到内部内容区。

• 绿色组件（内容滚动区）：

marginTop: "16px",
marginBottom: "78px",
flex: 1,
overflow: "auto"

通过flex: 1占据父容器除底部组件外的全部剩余空间，内容超出时自身触发滚动。

• 橙色组件（固定底部区）：

display: "flex",
justifyContent: "center",
marginRight: "17px",
marginLeft: "17px"

无需额外定位，在垂直flex布局中会自动停靠父容器底部，且自身内容增加时会向上延伸挤压内容区空间。

核心原理： #

1. 父容器采用垂直flex布局，让子元素按垂直方向排列，避免整体滚动导致底部组件脱离视野。
2. 内容区通过flex: 1抢占剩余空间，同时自身开启滚动，保证底部组件始终固定在父容器底部。
3. 底部组件不设固定高度，由内容自动撑开，实现内容增加时向上延伸的需求。

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