html - Flex 显示与绝对定位冲突

Question

我在 div 中有这些按钮，它们的 CSS 如下:

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>

并且没有其他与这些按钮相关的内容。

我的意图是让按钮位于屏幕底部，同时拉伸(stretch)它们以占据均匀的空间并占据所有空间。问题是，我该怎么做？

Answer 1

将 flex-grow 属性更改为 flex 并将 100% 的 width 添加到 div.IFlexible:

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%}

div {
  font-size: 5vw;
  font-family: Calibri, Helvetica, sans-serif;
}

div.IFlexible {
  display: flex;
  width: 100%; /* added */
}

div.yesno {
  position: absolute;
  bottom: 4vw;
}

div > button {
  font-size: 5vw;
  flex: 1; /* modified */
}

<div class="yesno IFlexible">
  <button id="addNewOK" class="confirmBut">Confirm</button>
  <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>