Flex display conflicts with absolute positioning

Question

I have these buttons in a

div

and their css as follows:

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>

And there is nothing else that would concern these buttons.

My intention was to have the buttons at the bottom of the screen, while stretching them to take up even space and take up all the space. Question is, how do I do it?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Flex display conflicts with absolute positioning

Sign up