如何让Flexbox布局中#item-3填充剩余垂直空间？

要让#item-3填充剩余垂直空间，且仅修改#item-3的CSS，可按以下方式调整：

#item-3 {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 100px;
  max-height: unset !important;
  margin-top: auto;
  height: 100%;
  background-color: red;
  overflow: auto;
}

原理说明 #

• margin-top: auto：利用flex布局的自动margin特性，将#item-3推至容器底部，同时让#item-1和#item-2固定在顶部，自动填充两者与#item-3之间的剩余空间。
• align-self: stretch：替换原有的align-self: flex-start，让#item-3在垂直方向拉伸至所在行的高度。
• max-height: unset !important：移除原有的max-height限制，避免元素高度被不必要截断。
• height: 100% + overflow: auto：确保#item-3高度覆盖从#item-1/#item-2底部到容器底部的剩余空间，若内容超出该空间，自动显示滚动条避免溢出。

内容的提问来源于stack exchange，提问作者Mümin ZEHİR