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>

现在，我有点明白为什么这种情况正在发生，但是我不知道解决这个问题的最佳方法是什么。 如何使用灵活的盒子模型在中心对齐某些内容，但如果元素不适合则让元素溢出？

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的一个重要特征是顶部和底部边距的auto值确实听起来像它的声音，而这正是你需要的，而不是justify-contents / align-items。

那么我们就得到：

#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

<强>小提琴

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

我不确定这是你想要的???

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

3 个答案: