agiro agiro - 1 year ago 110
CSS Question

Flex display conflicts with absolute positioning

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?

VXp VXp
Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download