Question

Google Chrome中存在一个问题，即当元素放置在Flexbox容器内时，元素在相对于视口的不同方向上展开/折叠，其中相邻的 flex项目具有space-between或{{1合理的内容。

这在Firefox，IE11，Edge或Safari中不是问题，因为元素总是向下扩展。

我很好奇：

Chrome的行为是否符合某些规范？如果是这样，哪一个？
如果没有，那么为什么在Chrome中完成此操作？（恕我直言，点击触发器随机消失在外面是一种可怕的用户体验。）
某些人可以修改或停用Chrome的行为吗？例如。通过CSS或元标记？

更新1：如果可能的话，我已提交issue #739860 on chromium bug tracker寻求Chromium开发者的见解/解释。

以下是插入的两个示例。可以在此笔中找到描述问题的完整测试套件：https://codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle，以便展开/折叠动画可以动画并且对眼睛可见。详细信息标记也会出现相同的行为，但是目前还没有跨浏览器支持，并且展开/折叠太过笨拙。

例1：Chrome在对齐的flexbox之间展开/折叠行为

＆＃13;

center

＆＃13;

$('button').click(function() {
  $(this).next().slideToggle();
})

＆＃13;

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;
}

＆＃13;

例2：Chrome的中心对齐flexbox的展开/折叠行为

＆＃13;

<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>

＆＃13;

$('button').click(function() {
  $(this).next().slideToggle();
})

＆＃13;

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;
}

＆＃13;

Answer 1

将此代码添加到您的Flex容器中：

overflow-anchor: none

这将禁用Chrome中称为＆＃34;滚动锚定＆＃34;的功能，这会导致框（revised codepen）向上扩展。

在Chrome中，展开框的向上/向下方向由视口中的滚动位置控制，而不是布局本身。

Chrome会针对此行为采取独特方法，以改善用户体验。

基本上，它们将DOM元素绑定到当前滚动位置。屏幕上此特定（＆＃34; anchor＆＃34;）元素的移动将确定对滚动位置的调整（如果有的话）。

他们称这种方法为＃34; Scroll Anchoring＆＃34;。该页面解释了该算法： https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

此行为目前是Chrome独有的，但Google is pushing for standardization.

根据Scroll Anchoring文档，将overflow-anchor: none应用于相应的元素将禁用滚动锚定调整。

更多信息：

使用flexbox

1 个答案: