具有溢出自动的flex模型垂直对齐

Question

灵活的盒子模型使得垂直对齐变得非常容易。然而，我一直遇到的一个问题是，当我将视口调整为“太小”大小时，内部框将在顶部溢出，尽管该元素驻留在overflow: auto元素中。换句话说，您仍然可以滚动到底部(与overflow: auto预期的一样)，但它不能反过来工作。

​

#con {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
#center {
  background: green;
  color: white;
}

<div id="con">
    <div id="center">
        Invisible<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10
    </div>
</div>

​

现在，我有点明白了为什么这会发生在规范上，但是我不知道解决这个问题的最好方法是什么。How 您可以使用柔性盒模型对齐中心的东西，但是如果元素不适合，则让元素溢出

Answer 1

这可能是一个选项：http://jsfiddle.net/jge6ppaz/

.concon
{
    width:300px;
    height:100px;
    display:flex;
    overflow: auto;
    flex:0 0 auto;
    flex-direction:column;
    background: yellow;
    justify-content:center;
}

.con {
  display: flex;
  flex:0 0 auto;
  flex-direction:column;
  max-height:100%;
  box-shadow:inset 0 0 20px red;
}

.center {
  background: green;
  color: white;
  flex:0 0 auto;
  align-self:center;
}

以及标记：

<div class="concon">
    <div class="con">
        <div class="center">
            contents here
        </div>
    </div>
</div>

Answer 2

因此，事实证明这是Overflow: auto causes vertically centered items to be cut off using Flexbox的翻版(由cimmamon自己在聊天中发现)，然而，由于这个问题的角度不同(2009年与2012年的柔性盒版本)，我不打算把这个问题标记为一个重复。

引用链接的答案：

Flexbox的美妙之处在于它提供了许多不同的方式来实现特定的布局。Flexbox的一个被低估的特性是，顶部和底部边距的自动值实际上可以达到它听起来的效果，而这正是您在这里所需要的，而不是对齐内容/对齐项。

所以我们只需要：

​

#con {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  overflow: auto;
}
#center {
  background: green;
  color: white;
  margin: auto;
}

<div id="con">
    <div id="center">
        Invisible<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10
    </div>
</div>

​

Answer 3

Fiddle

http://jsfiddle.net/s3bjkqj4/1/

CSS

#con {
  width: 300px;
  height: 100px;
  background: yellow;
display: inline-flex;

  overflow: auto;
}
#center {
  background: green;
  color: white;      
  width:80px;
  text-align:center;
  margin:0 auto;
}

我不确定这是你想要的吗？