$('button').click(function() {
$(this).next().slideToggle();
})</pre>
body {
边距：30 像素；
字体系列：无衬线字体；
}
在旁边，
除了div，
概括，
主要的，
按钮，
详情 p,
按钮 + p {
背景：rgba(0,0,0,.09);
边框：无；
内边距：20px；
保证金：0；
}
.flex容器{
显示：柔性；
}
在旁边 {
弹性：1；
位置：相对；
最大宽度：25%；
背景：薄荷奶油；
显示：柔性；
弯曲方向：列；
位置：相对；
}
aside.space- Between {
对齐内容：空间之间；
}
放在一边.center {
调整内容：居中；
}
主要的 {
弹性：3；
位置：相对；
最大宽度：75%；
背景：爱丽丝蓝；
垂直对齐：顶部；
高度：100%；
}
主要> * + * {
顶部边距：20px；
}
按钮 + p {
显示：无；
}</pre>
<脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</脚本>
<节类=“flexcontainer”>
<aside class="space- Between">
顶部侧边栏
底部侧边栏
</旁白>
<主要>
<按钮>slideToggle
<p>其他浏览器：始终向下展开。<br>
Chrome：应始终向下展开，因为顶部边栏始终可见。
<p>其他浏览器：始终向下展开。<br>
Chrome：应向下展开，同时底部侧边栏和顶部侧边栏均可见。但如果您向下滚动足够远以使顶部侧边栏超出屏幕，则会向上扩展。
<p>其他浏览器：始终向下展开。<br>
Chrome：应向下展开，同时底部侧边栏和顶部侧边栏均可见。但如果您向下滚动足够远以使顶部侧边栏超出屏幕，则会向上扩展。
;
</主要>
</节></pre>
</p>
<p><strong>示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p>
<p>
$('button').click(function() {
$(this).next().slideToggle();
})</pre>
body {
边距：30 像素；
字体系列：无衬线字体；
}
在旁边，
除了div，
概括，
主要的，
按钮，
详情 p,
按钮 + p {
背景：rgba(0,0,0,.09);
边框：无；
内边距：20px；
保证金：0；
}
.flex容器{
显示：柔性；
}
在旁边 {
弹性：1；
位置：相对；
最大宽度：25%；
背景：薄荷奶油；
显示：柔性；
弯曲方向：列；
位置：相对；
}
aside.space- Between {
对齐内容：空间之间；
}
放在一边.center {
调整内容：居中；
}
主要的 {
弹性：3；
位置：相对；
最大宽度：75%；
背景：爱丽丝蓝；
垂直对齐：顶部；
高度：100%；
}
主要> * + * {
顶部边距：20px；
}
按钮 + p {
显示：无；
}</pre>
<脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</脚本>
<节类=“flexcontainer”>
P粉2835590332023-08-26 12:21:55
将此代码添加到您的 Flex 容器中：
溢出锚：无这将禁用 Chrome 中称为“滚动锚定”的功能，该功能会导致框向上扩展 (修订的代码笔）。
在 Chrome 中，展开框的向上/向下方向由视口中的滚动位置决定，而不是布局本身。
为了改善用户体验，Chrome 针对这种行为采取了独特的方法。
基本上，它们将 DOM 元素绑定到当前滚动位置。屏幕上这个特定（“锚点”）元素的移动将确定对滚动位置的调整（如果有）。
他们将这种方法称为“滚动锚定”。该算法在此页面上进行了解释： https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
此行为目前是 Chrome 独有的，但Google 正在推动标准化。
根据滚动锚定文档，将 overflow-anchor: none 应用到适当的元素将禁用滚动锚定调整。
更多信息：