I have these buttons in a
div
div {
font-size: 5vw;
font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
display:flex;
}
div.yesno {
position: absolute;
bottom: 4vw;
}
div > button{
font-size: 5vw;
flex-grow: 1;
}
<div class="yesno IFlexible">
<button id="addNewOK" class="confirmBut">Confirm</button>
<button id="addNewCancel" class="confirmBut">Cancel</button>
</div>
Changed flex-grow to flex and added the width of 100% to the div.IFlexible:
* {margin: 0; padding: 0; box-sizing: border-box}
div {
font-size: 5vw;
font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
display: flex;
width: 100%;
}
div.yesno {
position: absolute;
bottom: 4vw;
}
div > button {
font-size: 5vw;
flex: 1;
}
<div class="yesno IFlexible">
<button id="addNewOK" class="confirmBut">Confirm</button>
<button id="addNewCancel" class="confirmBut">Cancel</button>
</div>