一个有趣的CSS题目

前几天无意间看到一个有趣的题，题目很简单，但是最终的结果却出人意料，题目是这样的：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="theme-color" content="blue"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .parent{
    display: flex;
    flex-direction: column;
    height: 600px;
    width: 300px;
    background-color: aqua;
  }
  .header{
    height: 200px;
    background-color: red;
  }
  .fotter{
    height: 200px;
    background-color: blue;
  }
  .content{
    height: 100%;
  }
</style>
<body>
  <div class="parent">
    <div class="header"></div>
    <div class="content"></div>
    <div class="fotter"></div>
  </div>
</body>
</html>

这段代码中的content的高度是多少，大家可以自己想一下，稍微思考一下。接下来让我们看一下豆包的回答：再看一下通义千问的回答：

再看一下deepseek的回答：

最后再看看Gemini3的回答：

大家可能以为content的高度不就是200px吗，但是结果真的是这样的吗？

请大家看一下最终的结果：

大家会看到content的高度为360px,header和footer的高度为120px，是不是感觉不可思议，为啥会这样嘞，这个问题，想问ai就会发现，这咋问啊，ai全是错的，那我来告诉你们答案（当然我说的也不一定对，但是大差不差，结果肯定是对的）：

percent height 会被解析为父容器的绝对值：content 的 height:100% → 600px（父高度）。

每个子项的 flex base size（假设基准）分别是 header=200, content=600, footer=200，总和 = 1000px。

可用主轴空间 = 600px，差额（需要收缩） = 1000 - 600 = 400px。

默认 flex-shrink = 1，按基准尺寸比例收缩：content 收缩量 = 600/1000 * 400 = 240 → 最终 content 高度 = 600 - 240 = 360px。

参考（建议重点看 W3C 规范里的算法）：

W3C Flexbox 规范（详细算法）：www.w3.org/TR/css-flex...

W3C 解析可伸缩长度（resolve flexible lengths）：www.w3.org/TR/css-flex...

MDN（概念与属性）：

flex-basis：developer.mozilla.org/zh-CN/docs/...

flex-shrink：developer.mozilla.org/zh-CN/docs/...

Flexbox 教程（概览）：developer.mozilla.org/zh-CN/docs/...

大家可以详细看看理解一下，当然不看也没关系，知道这个计算规则也可以了，至少比ai强了。