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; 
} 

내가 클래스 헤더 평방의 요소 전체에 확산 될 것이라고합니다 컨테이너의 너비, 즉 머리글 제곱의 전체 너비가 페이지의 100 %가되는 것을 의미합니다.

내가 명시 적으로 CSS에서 헤더 평방 클래스의 폭을 정의하지 않고 그것을 할 수 있습니까?

Answer 1

그냥 폭 전체를 차지하기 위해 .header-square 요소에 flex: 1을 적용합니다.

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

#table-header { 
    height: 100%; 
} 

을 그리고 .header-square에서 고정 height: 100px을 제거 :

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

편집

다음을 추가, 전체 높이를 차지합니다.

Answer 2

클래스에 '.header 스퀘어'

Answer 3

.header 평방 {
background-color: aqua;
height:100px;
width: calc(100%/7);
을 flex: 1 추가 :

결과는 다음과 같이해야한다 }

,451,515,

이 1 내가이 일