css - auto strech buttons horizontally - css

Question

I'm trying to figure out how to use this w3schools example
How do I modify it, so that buttons stretch to fill the entire page width?
I want to add buttons dynamically but don't know their width in advace.
Here it is in JSFiddle
The relevant clipping of the CSS code:
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 15%; // <------ hardcoded width
}

Answer 1

You could use flex. Add a wrapping div set to display: flex and add flex-basis: 100% to .tablink.
.tab-container {
display: flex;
width: 100%;
}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
flex-basis: 100%;
}
<div class="tab-container">
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
</div>
Here's a great flexbox cheatsheet.

Answer 2

You can use flexbox to achieve this. Since the elements tabs getting used is adding dynamically you should remove the hardcoded width on it like mentioned in your comment and add a parent div to the buttons with property display:flex.
Replace your HTML part where the buttons are rendered with this
<div class="tabBar">
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
</div>
And add this to css
.tabBar {
display: flex;
flex-wrap: wrap;
}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
A working demo is here

Answer 3

Changing the width to 25% will do the trick.