Google Chrome 使用 Flexbox 视口锚定扩展方向
<p>Google Chrome 中存在一个问题，当元素放置在具有<code>之间有空格</code的<em>相邻</em> Flex 项目的 Flexbox 容器内时，元素会相对于视口以不同方向展开/折叠> 或 <code>center</code> 对齐内容。</p>
<p>这在 Firefox、IE11、Edge 或 Safari 中不是问题，因为元素始终向下扩展。</p>
<p>我很好奇：</p>
<ul>
<li>Chrome 的行为是否遵循某些规范？如果有，是哪一个？</li>
<li>如果不是，那为什么要在 Chrome 中这样做？ （恕我直言，点击触发器在屏幕外随机消失是可怕的用户体验。）</li>
<li>可以通过某种方式修改或禁用 Chrome 的行为吗？例如。通过 CSS 或元标记？</li>
</ul>
<p><strong>更新 1：如果可能的话，我已在 chromium bug tracker 上提交了问题 #739860，寻求 Chromium 开发人员的见解/解释。</strong></p>
<hr>
<p>下面插入了两个示例。描述该问题的完整测试套件可以在这支笔中找到：https://codepen.io/jameswilson/full/xrpRPg/ 我选择在本示例中使用 slipToggle，以便展开/折叠运动是动画的并且对眼。详细信息标签也会发生相同的行为，但还没有跨浏览器支持，并且展开/折叠太卡顿了。</p>
<p><strong>示例 1：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”>
<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”>
