容器出现滚动条导致布局抖动问题

项目场景：

我的场景是点击左侧列表，右侧显示标题和内容。大家自己yy一下。

---

问题描述

左侧列表每个名称都不一样，有长有短，短的还好，长的就受不了了，长的标题名称会出现滚动条(我的是水平滚动条，点击多个列表可以展示多个标题，点击不同的标题展示不同的内容，也可以删除标题)。操作临界值，加一个标题就出现滚动条了，删除一个标题，滚动条就消失，就这么反复操作，我的布局也跟着再动！它们还挺有节奏感。

---

解决方案：

找了很多解决方案，但是他们的给的答案在我这里都不太行，我还是总结一下吧。

方式一:

官网描述：如有必要，溢出的内容会被截断以从垂直方向适应元素的边距框。无论内容是否发生溢出，浏览器总是显示滚动条。（这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。）而打印机可能会打印溢出的内容。

html{
	overflow-y:scroll;
}

方式二:

已弃用
官网描述： 行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。
auto : 取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

html{
	overflow-y:overlay;
}

方式三：

个人理解就是设置一个最大的内边距或者外边距，一般不会出现页面抖动情况，但是影响我的内容展示了，不出现内容或者不出现滚动条的情况

html{
	//二选一
	padding-left:calc(100vw - 100%)
	//或者使用
	margin-right:calc(100% - 100vw)
}

方式四

	scrollbar-gutter:stable;

方式五:

这个我没有试，大家可自行试一下。

html{
	overflow-y:scroll;
}

:root{
	overflow-y:auto;
	ovarflow-x:hidden;
}

:root body{
	position:absolute;
}

body{
	width:100vw;
	overflow:hidden;
}

方案六：（最终方案）

因为我们要求不是很严格，所以我直接改动了一下布局的宽度，给它留出一点点的空间，再次操作的时候没有任何抖动了。