# 一个困扰十多年的css问题即将被解决啦
* 抖音：
* B站：
CSS里边有个困扰了我们十多年的问题
W3C团队最近终于把它解决了
什么问题呢
我们先来看这个demo哈
现在这个容器的高度是
我们看不到它
但如果我们再写一个height
它肯定会覆盖前面的
对吧?这个没问题
但前提肯定是这里边写的值要合法
比如这样写
它肯定就没办法覆盖
所以我们写一个auto的话
大家看从效果上来看
肯定它是一个合法值
但是呢auto有个最大的问题
就是它不支持过渡动画
大家看我来切换这个auto的时候
没有任何过渡
但如果是100像素的话呢
它是有过渡的 对吧
之前我们碰到这种问题
都是用max-height来解决
比如说这样
我们开始呢把max-height设成
这样呢它也不会显示这个容器
然后呢
我们再把这个max-height设的大一点
比如说3个
大家看它看起来也是有动画
但是这个动画的效果
其实是取决于这个999设了多大
比如我们设小一点：
它看起来呢
它就会好一点
看到了吗
你设的再大一点
你会发现他其实就像没有动画了一样
我们再来试一下看看
为什么？因为他要在这0.3秒内
把这动画从0到5个9来执行
所以在前面我们能看到的这一点
看起来就像一晃而过
所以max-height这种方法
当时也只是一个折中的方案（不考虑js的前提）
大家看Chrome官网这个issues哈
（为啥说它有十多年了）
这是2013年提的一个issues问题
就是这个height auto
它不只是动画
甚至呢大家看在2016年的时候
它就被标记成
won't fix了
大家看
然后呢
23年底的时候呢
他又重新打开了Reopen了
因为W3C开始计划解决这个问题了
那现在呢
W3C已经把这个标准写好了
只是现在处于一个草稿待发布的状态
增加了一个方法叫calc-size
而且呢chrome已经支持了哈
它在123版本就开始测试了
打算在128版本开始默认的就启用它了
那我现在用的是126的版本
所以我可以这样把它启动起来
我们Chrome flags
然后搜这个Web platform
把这个打开
现在默认是禁用的
好需要重启一下
OK
然后呢
我们这里边就会多一个属性哈
height是
这里写一个calc-size
然后写个auto
大家看它就能完美支持过渡了
而且呢它还支持在这里边加运算
比如说我这写一个size乘以1.
也就是说
我让它的高度是自动高度的1.5倍
那与此同时呢
其实W3C还写了另外一个属性
Interpolate-size
但是呢我在这个Chrome这个版本里测
还测不出来
它怎么用呢
W3C是这样计划的啊
就在这里
在root里边
然后这个属性这里边可以怎么写呢
我们来看一下啊
interpolate它有两个值
一个是numberic only
也就是说默认的是这个值
它只能支持0-100像素啊这种切换
还有一个就是allow keywords
就是通过这种方式全局来切换
他是不是支持从0到auto
的动画
比如说
W3C准备了两个方案供大家选择
一种是在这种全局的切换
一种是通过calc-size的方式
那这种方式
现在在chrome下已经可以测试了哈
而且哈
这个属性各大浏览器也开始支持了
比我们在这里能看到
像Firefox啊
或者Safari都已经有自己的计划了
最后我再给大家看个好玩的哈
就是我在研究的过程中
像这个属性的命名我发现也挺有意思
有人把他们团队内部的一个聊天记录
贴上来了
这里边他他们在讨论这个问题哈
然后呢就有人提出了这个名字
大家看这是第一次提的
他叫他后边还多了一个-keywords
是这个方案
但是呢最终没有被采用
继续往下搜这个关键字哈
大家看还有人提了这样的方案
normal 和 allow-keywords
已经跟我们现在很接近了哈
然后讨论来讨论去
又提出来numberic-only和allow-keywords
这个现在就是最终的方案了
已经写到W3C标准里边了
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/yi-ge-kun-rao-shi-duo-nian-de-css-wen-ti-ji-jiang-bei-jie-jue-la.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.