目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。
此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素
overflow
-y:
scroll
;
起初，我大概的代码布局如下：
<div className...
// 禁止浏览器滚动页面
let edit2d = document.querySelector(".edit2d");
edit2d.addEventListener("touchmove", e => {
e.preventDefault();
父元素area 下el-tabs，el-tab单页有的需要展示滚动条，有的不需要（因为是内嵌页面，内嵌里有自己的滚动条）
1、本来是给area都设置滚动条，先取消了area给el-tabs的滚动条
2、此时发现， 无论怎么给从里往外的元素加
overflow
scroll
都无效，或者加了定位，也无效
仔细点F12小手，看区域
此时可以看到，area只有那么一小块，是el-tabs的内容超出了，设置滚动条的元素越级了
换句话说，el-tab在el-tabs的容器内没有ov
父级用
overflow
-x:
scroll
;
子级用display: inline-black;
子极超过父级的宽度之后，并没有的到左右滑动效果，而是另起一行，那么我们可以给父级写一个属性禁止它的子级自动换行
white-space: nowrap;//禁止换行
相信大家搜
css
touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。
之所以写，是因为单独去学知识点或者单独看一篇文章其实很简单的，难的是在自己实践中，因为一个问题找一个方案，然后又引起另外一个问题，而这个不断发现问题的过程非常低效，需要各种尝试和理解。
使用
css
touch-action的原因
在其官方的说明中：是否，以及以何种方式，给定...
.container::-webkit-
scroll
bar {}
但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome
2、为了兼容其他的浏览器，可以用这样的方法：
在滚动区域外再套一层div，给这层div设置
overflow
: h...
如果在使用 `
overflow
:
scroll
` 样式时，设置了 `max-height` 和 `min-height`，但是没有生效，可能是由于其他样式或元素影响了容器的高度。以下几种情况可能导致 `max-height` 和 `min-height`
不生效
：
1. 容器有固定高度或高度被其他元素撑开：如果父级元素或子元素设置了固定高度或者使用了浮动、绝对定位等属性，可能会影响到容器的高度，导致 `max-height` 和 `min-height`
不生效
。
2. 内部元素高度超出容器高度：如果容器中的内容比容器本身的高度更高，容器也可能会被撑开，导致 `max-height` 和 `min-height`
不生效
。可以使用 `
overflow
: auto` 样式来自动添加滚动条，或者通过调整内部元素的高度来
解决
这个问题。
3. 其他样式影响了容器的高度：如果容器有其他样式，比如 `padding` 或 `margin`，也可能会影响到容器的高度，导致 `max-height` 和 `min-height`
不生效
。可以检查一下其他样式是否可能导致了这个问题。
为了
解决
这个问题，可以先检查以上这些情况是否存在，如果存在，需要相应地调整样式或元素。如果以上情况都不存在，可以尝试使用 `!important` 关键字强制生效。例如：
.container {
overflow
:
scroll
;
min-height: 100px !important;
max-height: 200px !important;
但是注意，使用 `!important` 关键字会让样式变得更难以维护，应该尽量避免使用。
