'CSS Flexbox: How to make the children elements occupy the entire width of their container

Please look at my code here: 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;
}

I want that the elements of class header-square will be spread on the entire width of the container, meaning that the total width of header-squares will be 100% of the page.

How can I do it without explicitly defining a width for header-square class in css?

cssflexbox


Solution 1:[1]

Just apply flex: 1 to your .header-square elements to occupy entire width.

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

EDIT

To occupy entire height, add the following:

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

#table-header {
    height: 100%;
}

And remove fixed height: 100px from .header-square.

Result should be something like this:

enter image description here

Solution 2:[2]

Add flex: 1 to class '.header-square'

Solution 3:[3]

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

The .header-square is missing width attribute. Therefore you should expand to 100% by doing width: calc(100% / 7); to achieve your desired result.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Akshay Kumar
Solution 3 IntFooBar

Related Questions