<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> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).next().slideToggle(); })</pre> <pre class="brush:css;toolbar:false;">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 &gt; * + * { margin-top: 20px; } button + p { display: none; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;section class="flexcontainer"&gt; &lt;aside class="space-between"&gt; &lt;div&gt;Top Sidebar&lt;/div&gt; &lt;div&gt;Bottom Sidebar&lt;/div&gt; &lt;/aside&gt; &lt;main&gt; &lt;div&gt; &lt;button&gt;slideToggle&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; Chrome: Should always expand downward because Top Sidebar is always visible.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;button&gt;slideToggle (usually expands down)&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; 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.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;button&gt;slideToggle (usually expands down)&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; 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.&lt;/p&gt; &lt;/div&gt; &lt;/main&gt; &lt;/section&gt;</pre> </p> <p><strong>示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p> <p> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).next().slideToggle(); })</pre> <pre class="brush:css;toolbar:false;">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 &gt; * + * { margin-top: 20px; } button + p { display: none; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;section class="flexcontainer"&gt; &lt;aside class="center"&gt; &lt;div&gt;Center Sidebar&lt;/div&gt; &lt;/aside&gt; &lt;main&gt; &lt;div&gt; &lt;button&gt;slideToggle (usually expands downwards)&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;button&gt;slideToggle&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;button&gt;slideToggle (usually expands downwards)&lt;/button&gt; &lt;p&gt;Other browsers: always expands downward.&lt;br&gt; 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.&lt;/p&gt; &lt;/div&gt; &lt;/main&gt; &lt;/section&gt;</pre> </p>