# 一个困扰十多年的css问题即将被解决啦

* 抖音：[https://v.douyin.com/iUB63rbt/](https://v.douyin.com/iUB63rbt/)
* B站：[https://www.bilibili.com/video/BV1bM4m1y7rJ/](https://www.bilibili.com/video/BV1bM4m1y7rJ/)

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标准里边了
