11
方向有一个在谷歌浏览器的一个问题，其中放置一个Flexbox的容器内具有space-between或center正当内容的相邻挠性项时元件扩大在不同的方向相对于视/折叠。谷歌浏览器视口锚定扩大与Flexbox的
这不是Firefox，IE11，Edge或Safari中的问题，因为元素总是向下展开。
我很好奇：这里
- 确实Chrome的行为遵循一定的规范呢？如果是这样，哪一个？
- 如果没有，那么为什么这是在Chrome中完成的？ （恕我直言，这是可怕的UX点击触发随机消失在屏幕外。）
- 铬的行为可以修改或禁用在某些方面？例如。通过CSS或元标签？
更新1：我已经提交issue #739860 on chromium bug tracker寻求来自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;
}<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>
听起来就像是最近实施[滚动锚固]（https://github.com/WICG/ScrollAnchoring/blob/master/explainer .md）功能。正如您所看到的，通过容器或文档主体上的“overflow-anchor：none”可以选择退出。 – wOxxOm
@wOxxOm ++你完全正确。将'overflow-anchor：none'添加到'.flexcontainer'可以解决问题。如果你把它转换成答案，我会给你奖励点数。您是否也通过铬追踪器提交的错误来到这里？ – JamesWilson
不，不需要点这么简单，也是我从错误跟踪器来的。 – wOxxOm