Google Chrome uses Flexbox viewport to anchor expansion direction
<p>There is an issue in Google Chrome where when an element is placed inside a Flexbox container that has <em>adjacent</em> Flex items with <code>spaces</code Expand/collapse> or <code>center</code> align content in different directions relative to the viewport. </p>
<p>This is not a problem in Firefox, IE11, Edge, or Safari because elements always expand downwards. </p>
<p>I’m curious:</p>
<ul>
<li>Does Chrome behave according to certain specifications? If so, which one? </li>
<li>If not, why would you do it in Chrome? (IMHO, clicking a trigger that randomly disappears off-screen is a terrible user experience.) </li>
<li>Is it possible to modify or disable Chrome's behavior in some way? For example. Via CSS or meta tags? </li>
</ul>
<p><strong>Update 1: If possible, I have submitted issue #739860 on the chromium bug tracker to seek insight/explanation from the Chromium developers. </strong></p>
<hr>
<p>Two examples are inserted below. The full test suite describing the problem can be found with this pen: https://codepen.io/jameswilson/full/xrpRPg/ I chose to use slipToggle in this example so that the unfold/fold movement is animated and eye-catching. The same behavior happens with the details tab, but there's no cross-browser support yet, and the expand/collapse is too janky.</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 > * * {
margin-top: 20px;
}
button p {
display: none;
}</pre>
<pre class="brush:html;toolbar:false;"><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></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 > * * {
margin-top: 20px;
}
button p {
display: none;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
