How to allow space evenly to each div in flex - html

Question

Demo site here.
When it is in large screen, apply button has too much space. I want to make it flex: space-around
When it starts to shrink, each div is not aligned evenly. (Again, flex: space-round will be nice)
full sass:
body {
font-family: 'Lato', sans-serif;
}
.errors {
color: red;
font-size: 70%;
}
.mainContainer {
background-color: #EAEDF1;
}
.banner {
position: relative;
color: white;
}
.banner .topLeft {
position: absolute;
top: 8px;
left: 16px;
font-size: 1.5vw;
}
.banner .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.5vw;
}
.banner img {
width: 100%;
height: 400px;
object-fit: cover;
}
.banner i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
position: absolute;
bottom: 10%;
left: 50%;
cursor: pointer;
}
.banner .arrowDown {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.bodyContainer {
padding: 20px 10px 10px 10px;
}
.bodySelf {
background-color: white;
}
.filter {
display: flex;
flex-wrap: wrap;
background-color: #f9fafa;
padding: 20px;
}
.filter .inputComponent {
min-width: 150px;
max-width: 200px;
}
.filter .inputComponent input {
width: 100%;
height: 27px;
}
.filter .dorpdownComponent {
min-width: 110px;
max-width: 200px;
}
.filter .applyButtonContainer {
width: 100px;
}
.filter .keywordMain {
flex-grow: 3;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .launchpadMain {
flex-grow: 4;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .minYearMain {
flex-grow: 2;
padding-right: 20px;
padding-bottom: 10px;
}
.filter .maxYearMain {
flex-grow: 2;
padding-right: 20px;
}
.filter .applyButtonMain {
flex-grow: 1;
padding-right: 20px;
}
.filter select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
-webkit-border-radius: 0;
border-radius: 0;
appearance:none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 3px;
border: 1px solid #ccc;
padding: 8px;
width: 100%;
}
.filter select option {
background-color: white;
color: white;
}
.filter .applyButton {
height: 30px;
width: 100px;
font-weight: 600;
color: white;
background-color: #2dbaba;
}

Answer 1

In your css
.filter{
justify-content: space-around;
}
.filter .applyButtonMain {
//flex-grow: 1; //remove it
padding-right: 20px;
}
.filter .applyButtonContainer {
//width: 100px; //remove this too
}

Answer 2

Not final answer, may need edit base on OP reply
.filter > div {
flex-basis: 0;
flex-grow: 1;
}
Demo (run and check in full page mode):
.filter select {
-moz-appearance: none;
/* Firefox */
-webkit-appearance: none;
/* Safari and Chrome */
-webkit-border-radius: 0;
border-radius: 0;
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 3px;
border: 1px solid #ccc;
padding: 8px;
width: 100%;
}
.filter select option {
background-color: white;
color: white;
}
.filter {
display: flex;
flex-wrap: wrap;
background-color: #f9fafa;
padding: 20px 10px;
/* one */
}
.filter > div {
flex-basis: 0;
flex-grow: 1;
padding: 0 10px 10px 10px;
min-width: 110px;
}
.filter .inputComponent input {
width: 100%;
height: 27px;
}
.filter .applyButton {
height: 30px;
width: 100%;
font-weight: 600;
color: white;
background-color: #2dbaba;
}
<div class="filter">
<div class="inputComponent keywordMain">
<div class="labelText">Keywords</div>
<input placeholder="eg Falcon">
</div>
<div class="dorpdownComponent launchpadMain">
<div class="labelText">Launch Pad</div>
<select>
<option value="">Any</option>
<option value="kwajalein_atoll">Kwajalein Atoll</option>
<option value="ccafs_slc_40">Cape Canaveral Air Force Station Space Launch Complex 40</option>
<option value="stls">SpaceX South Texas Launch Site</option>
</select>
</div>
<div class="dorpdownComponent minYearMain">
<div class="labelText">Min Year</div>
<select>
<option value="">Any</option>
<option value="2017">2017</option>
</select>
</div>
<div class="dorpdownComponent maxYearMain">
<div class="labelText">Max Year</div>
<select>
<option value="">Any</option>
<option value="2006">2006</option>
</select>
</div>
<div class="applyButtonContainer applyButtonMain">
<div> </div>
<button class="applyButton">Apply</button>
</div>
</div>