溢出：使用 Flexbox 自动导致垂直居中的项目被切断

Posted 2023-03-06

【中文标题】溢出：使用 Flexbox 自动导致垂直居中的项目被切断

【英文标题】：Overflow: auto causes vertically centered items to be cut off using Flexbox

【发布时间】：2013-04-13 21:25:47

【问题描述】：

第一个链接是flexbox 2009模型：

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

第二个是2011-2012的修订版：

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

如果您垂直调整结果大小，您将看到“HELLO”在较新的 flex 模型中消失，如果您向下滚动，它会在底部显示一个空白区域。另一方面，旧的 flex 模型表现正确。

最新的 Chrome v26.0.1410.65 有什么办法解决这个问题吗？

【问题讨论】：

我似乎无法复制。两个小提琴看起来和我一模一样（Chrome v26.0.1410.64）。此外，如果不是内联的，CSS 会更容易阅读。

是的，我检查了最新的金丝雀版本的 Chrome，两者都是相同的。根据规范，它们也不应该有所不同，除了一些小细节和实现更少的错误。如果两者之间有任何差异，则后者很可能是正确的。

所以如果你把“结果”视口做得很小，你仍然可以通过向上或向下滚动看到标签“HELLO”吗？这适用于较新的型号。

当视口非常小时，“HELLO”只有在我水平滚动时才可见。我没有垂直滚动的选项。

我提到的是通过拖动 jsfiddle 的顶部栏来缩小视口，而不是调整浏览器的宽度。顺便感谢您的尝试，我几乎可以肯定这两种型号之间存在很大差异。

【参考方案1】：

很遗憾，2009 年和 2012 年规范之间的差异不仅仅涉及不同的属性名称。实施不完整的草稿始终是一场赌博，因此假设遵循较新规范的浏览器具有正确行为（即使它不是您想要的行为）总是更安全。

Flexbox 的美妙之处在于它提供了许多不同的方法来实现特定的布局。 Flexbox 的一个被低估的特性是 auto 的顶部和底部边距的值确实与听起来一样，它正是您在此处代替 justify-contents/align-items 所需要的。

http://codepen.io/cimmanon/pen/DEnHh

html, body 
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;


div.container 
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;


div.side 
  background: #F00;
  width: 50px;


div.center 
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-Y: scroll;
  background: #0f0;


div.child 
  margin: auto;
  background: white;
  width: 10em;


<div class="container">
  <div class="side"></div>
  <div class="center">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
    </div>
  </div>
  <div class="side"></div>
</div>

【讨论】：

没有指南针

此处为简化版：codepen.io/1j01/pen/KOKOMg（无 Compass、SCSS、供应商前缀或侧边栏）