if I set align-items:center, it will cause text overflow. What is the cause of this?
html
<div class="box">
<div></div>
<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/