Google Chrome 中存在一个问题，当元素放置在带有adjacent弹性项目有space-between or center合理的内容。
这在 Firefox、IE11、Edge 或 Safari 中不是问题，因为元素始终向下扩展。
我很好奇：
- Chrome 的行为是否遵循某些规范？如果有，是哪一个？
- 如果不是，那为什么要在 Chrome 中这样做呢？ （恕我直言，点击触发器随机消失在屏幕外是可怕的用户体验。）
- Chrome 的行为可以以某种方式修改或禁用吗？例如。通过 CSS 还是元标记？
更新1：我已经提交了chromium bug tracker 上的问题#739860 https://bugs.chromium.org/p/chromium/issues/detail?id=739860如果可能的话，向 Chromium 开发人员寻求见解/解释。
下面是插入的两个示例。描述问题的完整测试套件可以在这支笔中找到：https://codepen.io/jameswilson/full/xrpRPg/ https://codepen.io/jameswilson/full/xrpRPg/我在本例中选择使用 SlideToggle，以便展开/折叠动作具有动画效果并且肉眼可见。详细信息标签也会发生相同的行为，但尚不支持跨浏览器，并且展开/折叠太卡顿了。
例 1：Chrome 对对齐 Flexbox 之间的空间的展开/折叠行为
$('button').click(function() {
$(this).next().slideToggle();
})
body {
margin: 30px;
font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
background: rgba(0,0,0,.09);
border: none;
padding: 20px;
margin: 0;
}
.flexcontainer {
display: flex;
}
aside {
flex: 1;
position: relative;
max-width: 25%;
background: mintcream;
display: flex;
flex-direction: column;
position: relative;
}
aside.space-between {
justify-content: space-between;
}
aside.center {
justify-content: center;
}
main {
flex: 3;
position: relative;
max-width: 75%;
background: aliceblue;
vertical-align: top;
height: 100%;
}
main > * + * {
margin-top: 20px;
}
button + p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flexcontainer">
<aside class="space-between">
<div>Top Sidebar</div>
<div>Bottom Sidebar</div>
</aside>
<main>
<div>
<button>slideToggle</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should always expand downward because Top Sidebar is always visible.</p>
</div>
<div>
<button>slideToggle (usually expands down)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
</div>
<div>
<button>slideToggle (usually expands down)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
</div>
</main>
</section>
例 2：Chrome 中心对齐 Flexbox 的展开/折叠行为
$('button').click(function() {
$(this).next().slideToggle();
})
body {
margin: 30px;
font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
background: rgba(0,0,0,.09);
border: none;
padding: 20px;
margin: 0;
}
.flexcontainer {
display: flex;
}
aside {
flex: 1;
position: relative;
max-width: 25%;
background: mintcream;
display: flex;
flex-direction: column;
position: relative;
}
aside.space-between {
justify-content: space-between;
}
aside.center {
justify-content: center;
}
main {
flex: 3;
position: relative;
max-width: 75%;
background: aliceblue;
vertical-align: top;
height: 100%;
}
main > * + * {
margin-top: 20px;
}
button + p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flexcontainer">
<aside class="center">
<div>Center Sidebar</div>
</aside>
<main>
<div>
<button>slideToggle (usually expands downwards)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
</div>
<div>
<button>slideToggle</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
</div>
<div>
<button>slideToggle (usually expands downwards)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport, but then resumes expanding downwards again when Center Sidebar scrolls out of view.</p>
</div>
</main>
</section>
将此代码添加到您的 Flex 容器中：
这将禁用 Chrome 中称为“滚动锚定”的功能，该功能会导致框向上扩展（修改后的代码笔 https://codepen.io/anon/pen/NgLBpv).
在 Chrome 中，展开框的向上/向下方向由视口中的滚动位置决定，而不是布局本身。
Chrome 针对这种行为采取了独特的方法，以改善用户体验。
基本上，它们将 DOM 元素绑定到当前滚动位置。屏幕上这个特定（“锚点”）元素的移动将确定对滚动位置的调整（如果有）。
他们将这种方法称为“滚动锚定”。该算法在此页面上进行了解释：https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
此行为目前是 Chrome 独有的，但是谷歌正在推动标准化。 https://wicg.github.io/ScrollAnchoring/
根据滚动锚定文档，应用overflow-anchor: none到适当的元素将禁用滚动锚定调整。
更多信息：
- https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
- https://bugs.chromium.org/p/chromium/issues/detail?id=739860 https://bugs.chromium.org/p/chromium/issues/detail?id=739860
- https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/ https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/
- 更改 CSS 弹性顺序会导致滚动 https://stackoverflow.com/q/56050959/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
