flex 纵向排列 align-items:center 导致文字溢出是什么问题？

Question

如果我设置 align-items:center 就会导致文字溢出，这是什么原因导致的呢？

html

<div class="box">
    <div>测试测试测试测试</div>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测测试测试试</p>
    <span>hello word</span>
</div>

css

.box{
    width:200px;
    height:200px;
    display:flex;
    flex-direction:column;
      
    align-items:center; /*  溢出 */
    
    border:1px solid red;
    margin:50px;
    box-sizing:border-box;
    padding:10px;
}
.box p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

jsfiddle: https://jsfiddle.net/ea54ds3v/3/

Answer 1

看你写了p的样式 是想溢出的时候显示省略号，那你可以在p的样式上加
max-width: 100%;
此处p太长是box的内容溢出，并不是p的内容溢出，所以加在p的样式没有表现出来。

Answer 2

你文字超出盒子宽度肯定会溢出啊，除非设置overflow-x:scroll;