html - 为什么在这个 flex-column 方向示例中 height 属性会覆盖 flex-basis

Question

在下面的示例中，我有一个带有 flex-direction:column 的 flex 容器，对于 flex-item 有 flex-basis 和 height
我希望 flex-basic 会覆盖 height 但完全相反的 height:8px 会覆盖 flex-basis:7px我不知道原因！我预计弹性项目不会缩小，因为孩子的高度为 10px，但发生了！

https://jsfiddle.net/5y47jke0/

 .flex-container 
     {display: flex;justify-content: center;flex-direction: column;background: green;height: 200px;}
    .flex-item {
    flex-basis: 7px;
    max-height: 55px;
    height: 8px;
}
     .flex-item2 
     {background: #ffeb00;height: 14px;width: 120px;}
     .flex-item-child
     {height: 10px;}
     .image 
     {height: 10px;}
     .container
     {
         position: relative;
         left: 300px;
         top: 100px;
         background: red;
     }
    

 <div class="container">
            <div class="flex-container">
                <div class="flex-item">
                    <div class="flex-item-child">
                        <img src="https://i.postimg.cc/rmh60Y7w/mobile.png" alt="" class="image">
                    </div>
                </div>
    
                <div class="flex-item2">
                    
                </div>
            </div>    
        </div>    

标签： htmlcssflexbox