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

Question

我正在学习 CSS 中的技巧，但在将 flexbox 与绝对子元素和重叠的 div 结合使用时遇到了问题。根据在线问题，我发现它可能存在问题，我只是看不到解决我遇到的问题的方法。

我之前问过一个问题，解决方案工作正常:How to make one div always be at the bottom of the view and make top div resize based on bottom div?

基本上，顶部 div (Div A) 会填充底部 div 未动态填充的视口(viewport)剩余空间。

但是，我遇到了一个问题，因为我的 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 的空间 - 而不是使用 width: inherit 和 height: inherit 您可以使用 100%，也可以将 top 和 left 设置为零。

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

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>