将 flexbox 与绝对位置子项一起使用？

Question

我正在学习 CSS 中的诀窍，我在将 flexbox 与绝对子项和重叠 div 结合使用时遇到问题。根据在线问题，我发现它可能存在问题，我只是找不到解决我运行问题的方法。

我之前问过一个问题，解决方案很好用：

基本上是顶部 div (Div A) 填充底部 div 未填充的剩余 space 视口动态地。

但是，我运行遇到了一个问题，因为我的 divA 包含需要重叠的子元素并且正在使用 position: absolute。

在处理 flex 之前，这就是我定义顶部的方式 div：（请原谅命名和其他东西。为了这个例子，我将它们设为虚拟名称。）

    #divA {
        width: 100vw;
        height: 70vh;
        position: relative;
    }

    #innerContainer {
        position: absolute;
        width: inherit;
        height: inherit;
    }

    #centeredIcon {
        width: 2em;
        height: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

元素如下：

    <div id="divA">
        <div id="innerContainer"/>
        <img id="centeredIcon" src="..."/>
    </div>
    <div id="divB"> ... </div>

尝试将 Div A 的外部容器转换为使用 flex: 1 0 auto; 并将 divA 和 divB 放入包装器 div 时，我的 divA 的 innerContainer 几乎消失了（大小为 0）。

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

关于如何使这项工作有任何建议吗？

Answer 1

绝对定位的元素 innerContainer 没有正确填充其容器 divA 的 space - 您可以不使用 width: inherit 和 height: inherit使用 100% 并将 top 和 left 设置为零。

可选地，我在 divB 上添加了 flex-shrink: 0，这样当 window 高度较小时它不会缩小 - 请参见下面的演示：

body {
  margin: 0;
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#divA {
  position: relative;
  flex-grow: 1; /* occupy remaining space */
  background: lightblue;
}

#divB {
  flex-shrink: 0; /* do not shrink */
  background: lightgreen;
  /* center horizontally and place buttons vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
}

#innerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#centeredIcon {
  width: 2em;
  height: 3em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
}

<div class="wrapper">
  <div id="divA">
    <div id="innerContainer"></div>
    <img id="centeredIcon" src="https://via.placeholder.com/200" />
  </div>
  <div id="divB">
    <button>button 1</button>
    <button>button 2</button>
  </div>
</div>

将 flexbox 与绝对位置子项一起使用？

Using flexbox with absolute position children?

html

css

css-position

flexbox