flex佈局，子元素寬度不符合預期

預期

子元素內容不一樣，可是但願子元素平均分紅三份：

遇到的問題

實際上每一個子元素會根據內容寬度的不一樣而不平均分配：

代碼:

<div class="box">
    <div class="child child1">
      <h1>文字文字文字</h1>
    </div>
    <div class="child child2">
      <p>文字文字文字文字文字文字文字文字文字</p>
    </div>
    <div class="child child3">
      <p>888373773</p>
    </div>
</div>

.box{
        display: flex;
      }
      .child{
        height: 300px;
      }
      .child1{
        flex-grow: 1;
        background-color: #0f0;
      }
      .child2{
        flex-grow: 1;
        background-color: #f00;
      }
      .child3{
        flex-grow: 1;
        background-color: #fff000;
      }

解決方案

給每一個子元素的寬度設置爲0:

.child{
        height: 300px;
        width: 0;
      }

就解決這個問題啦！！！！！

而且這個解決方案也適合在flex佈局中，overflow失效的狀況！

原理

不太清楚，待更新.....