Flex弹性容器内div高度减半后靠顶、设置为容器25%宽不生效的问题

子元素设置50%高度后自动上移的原因与解决 #

Flex 容器默认采用 align-items: stretch 作为交叉轴对齐规则，默认状态下所有子元素会自动拉伸填满容器的垂直高度。当手动给单个子元素设置固定高度后，自动拉伸逻辑被打断，该元素会默认停靠在交叉轴起点（即Flex容器顶部），无法维持原本的垂直居中状态。
解决方式很简单，给对应子元素单独配置交叉轴对齐属性：

.antarik {
  height: 50%;
  align-self: center;
}

该属性仅作用于当前单个Flex子元素，不会影响其他兄弟节点的布局表现。

子元素设置25%宽度不生效的原因与解决 #

全局规则中给 .flex-container>div 设置了固定的 width: 100px。对比CSS选择器权重：

• .flex-container>div 由类选择器+直接子元素选择器组成，权重为 (0,1,1)
• .details 为单类选择器，权重为 (0,1,0)

权重更低的 .details 规则无法覆盖权重更高的固定宽度设置，因此25%宽度的样式不会被应用。
解决方式为提升 .details 规则的选择器权重，使其与全局子元素规则权重持平：

.flex-container>.details {
  width: 25%;
  /* 可补充关闭flex自动收缩规则，避免元素被默认压缩 */
  flex-shrink: 0;
}

补充提示：如果需要让元素25%的宽度计算包含内外边距，可在全局子元素规则中添加 box-sizing: border-box，避免实际渲染宽度超出预期。

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