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