# 使用 min-width 解决 Flex 或 Grid 布局时容器被撑大的问题

在使用 Flex 或 Grid 布局时，经常会遇到内容溢出容器或者将容器撑大的情况

例如在 grid 布局中元素尺寸为 1fr，或者 flex 布局中元素 flex-grow:1 时，想使用 Echarts 画图和布局中的文本省略显示时发现并没有达到预期的效果，容器被内容撑大了

想要解决这个问题，首先需要知道容器为什么会被撑大。

在设计网页时，自适应性是关键。必须考虑不同的屏幕尺寸、设备方向和用户偏好。CSS clamp () 是一个强大的工具，可以帮助您设计灵活的布局，但了解何时如何有效地使用它至关重要。

虽然 clamp () 可以使响应式设计的某些方面更容易，但仍需要记住一些特定的注意事项和潜在的缺点。了解何时正确的使用 clamp () 是解决问题的关键所在，而其他方法（如媒体查询），对于在项目中实现最佳结果至关重要。

让我们分析一下 clamp () 可以做什么，并实际探索它的优势和局限性。

# 所有 CSS 伪类、元素

# 一：display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是 W3C 提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex 是 Flexible Box 的缩写，意为 "弹性布局"，用来为盒状模型提供最大的灵活性。设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

我们在使用 vue 脚手架时，为了规范团队的代码格式，会有一个代码规范检测，如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。

做网页有时候会用到 JS 检测 IE 的版本，下面是检测 Microsoft Internet Explorer 版本的三种代码！
有一种代码：

这个只能自己去覆盖样式，通过元素审查查看原代码

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {

    background-color: #f0f7ff;

}