使用具有绝对位置子项的 flexbox？答案

【问题标题】：Using flexbox with absolute position children?使用具有绝对位置子项的 flexbox？
【发布时间】：2019-10-28 13:24:07
【问题描述】：

我正在学习 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 没有动态填充的视口的剩余空间。

但是，我遇到了一个问题，因为我的 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;
}

关于如何进行这项工作的任何建议？

【问题讨论】：

能否请您将此示例移到代码笔中以帮助其他人解决问题？
这是一个包含所有组件的小提琴，但我不能将我的代码原样放在这里，所以它是我在尝试添加“divB”之前最初的简化版本，影响顶部 div 大小“divA”的底部 div：jsfiddle.net/dz76vre5/3
见jsfiddle.net/bhe5jgdq（基本上代替inherit你可以使用100%的宽度和高度......你也可以只使用flex-grow: 1来占用剩余空间并添加@ divB 上的 987654331@ 以避免在某些情况下缩小）如果看起来不错，我会将其添加为答案
@kukkuz 这似乎是一种可行的方法

标签： html css flexbox css-position

【解决方案1】：

绝对定位的元素 innerContainer 没有正确填充其容器 divA 的空间 - 您可以使用 100% 和 settop 和 left 而不是使用 width: inherit 和 height: inherit零。

可选地，我在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>

【讨论】：