使用flexbox的谷歌浏览器视口锚定扩展方向
Google Chrome中存在一个问题，即当元素放置在Flexbox容器内时，元素在相对于视口的不同方向上展开/折叠，其中相邻的 flex项目具有space-between center对齐内容。
这在Firefox，IE11，Edge或Safari中不是问题，因为元素总是向下扩展。
我很好奇：
- Chrome的行为是否符合某些规范？ 如果是这样，哪一个？
- 如果没有，那么为什么在Chrome中完成？ （恕我直言，点击触发器随机消失，这是一个可怕的用户体验。）
- 某些人可以修改或禁用Chrome的行为吗？ 例如。 通过CSS或元标记？
更新1：如果可能的话，我已经向铬虫追踪者提交了问题＃739860，寻求Chromium开发者的见解/解释。
以下是插入的两个示例。 可以在此笔中找到描述该问题的完整测试套件： 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; }
Other browsers: always expands downward.
Chrome: Should always expand downward because Top Sidebar is always visible.
Other browsers: always expands downward.
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.
Other browsers: always expands downward.
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.
例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; }
Other browsers: always expands downward.
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.
Other browsers: always expands downward.
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.
Other browsers: always expands downward.
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.
将此代码添加到Flex容器中：
-
overflow-anchor: none
这将禁用Chrome中称为“滚动锚定”的function，这会导致框的向上扩展（ 修改后的代码集 ）。
在Chrome中，展开框的向上/向下方向由视口中的滚动位置控制，而不是布局本身。
Chrome会针对此行为采取独特方法，以改善用户体验。
基本上，它们将DOM元素绑定到当前滚动位置。 该特定（“锚”）元素在屏幕上的移动将确定对滚动位置的调整（如果有的话）。
他们称这种方法为“Scroll Anchoring”。 该页面解释了该算法： https ： //github.com/WICG/ScrollAnchoring/blob/master/explainer.md
此行为目前是Chrome独有的，但Google正在推动标准化。
根据Scroll Anchoring文档，将overflow-anchor: none应用于相应的元素将禁用滚动锚定调整。
更多信息：