CSS Flexbox：如何使子元素占据其容器的整个宽度

Question

请在此处查看我的代码：http://codepen.io/CrazySynthax/pen/NdJbmB

<table>
    <div id="table-header">
    <div class=header-square>SUN</div>
    <div class=header-square>MON</div>
    <div class=header-square>TUE</div>
    <div class=header-square>WED</div>
    <div class=header-square>THU</div>
    <div class=header-square>FRI</div>
    <div class=header-square>SAT</div>
  </div>

</table>

html, body {
    width: 100%
}

#table-header {
    flex-direction: row;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.header-square {
    background-color: aqua;
    border: solid;
    height:100px;
    display:flex;
}

我希望class header-square的元素将分布在容器的整个宽度上，这意味着header-squares的总宽度将是页面的100％。

如果没有在css中明确定义header-square类的宽度，我怎么能这样做呢？

Answer 1

只需将flex: 1应用于.header-square元素即可占据整个宽度。

.header-square {
    background-color: aqua;
    border: solid;
    height: 100px;
    display: flex;
    flex: 1;
}

修改

要占据整个高度，请添加以下内容：

html, body {
    width: 100%;
    height: 100%;
}

#table-header {
    height: 100%;
}

从height: 100px移除固定的.header-square。

结果应该是这样的：

Answer 2

将flex: 1添加到班级'.header-square'

Answer 3

.header-square {
    background-color: aqua;
    height:100px;
   width: calc(100% / 7);
}

试试这个1我认为它的工作是100％