11月10日总结

最近在群里，有个小伙伴问了这么一道很有趣的问题：

CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容

为了简化实际效果，我们看这么一张示意效果图：

可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。

这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？

答案当然是可以，XBoxYan 大佬在 CSS 实现超过固定高度后出现展开折叠按钮 介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。

当然，浮动 float 在现如今的 CSS 世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。
方法一：借助最新的容器查询

第一种方法，非常简单，但是对兼容性有所要求。那就是使用容器查询 -- @container 语法。

容器查询在 新时代布局新特性 -- 容器查询 也详细介绍过。

简单而言，容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度或者高度变化，对布局做调整的能力。

基于这个场景，我们假设我们有如下的 HTML/CSS 结构：

Lorem ipsum dolor s...

.g-container {
position: relative;
width: 300px;
height: 300px;
resize: vertical;
overflow: hidden;

.g-content {