为什么 `height: 100%` 和绝对定位在 flexbox 中不起作用？

Question

我正在尝试让 flexbox 布局的子 div 填充其父级。在任何其他情况下，将宽度/高度设置为 100% 会导致 div 填充其父级...我只想将 flexbox 用于我的顶级布局。

问题

• #map-container div 不会填充 #col1，即使它设置了 100% 的高度。
• #controls div 完全出现在#col1 之外。我以前使用绝对布局将框对齐到角落而没有问题。位于 flexbox 祖父母中似乎会导致问题。

我期望#map-container 和#map 填充#col1 和#controls 以对齐#map 的右下角。

.wrapper, html, body {
    height:100%;
    margin:0;
}
#col1 {
   display: flex;
}
#map-container {
    background-color: yellow;
    width: 100%;

  height: 100%;    
}
#map {
    background-color: purple;    
    width: 100%;
    height: 100%;
}
#controls {
    background-color: orange;    
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 100px;
    height: 20px;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    flex:2;
    display: flex;
}

#col1 {
    background-color: green;
    flex: 1 1;
}
#col2 {
    background-color: blue; 
    flex :0 0 240px;
}

<div class="wrapper">
    <div id="row1">Header</div>
    <div id="row2">
        <div id="col1">
            <div id="map-container">
                <div id="map">
                    Map
                </div>
                <div id="controls">Controls</div>
            </div>
        </div>
        <div id="col2">Sidebar</div>
    </div>
</div>

Answer 1

1. #map-container div 不会填充 #col1，即使它设置了高度 100%。

它不会那样工作，因为要使百分比单位工作，它需要在其父级上设置高度。这与flex 模型作斗争，其中弹性项目由弹性盒布局分布和排列，并且没有设置尺寸。 当所有元素都是 100% 时，为什么要使用 flex 布局？ 要么在所有元素上一直使用 100%，要么在所有容器上使用 flex。

如果你坚持使用 flex 布局，那么你将不得不进入嵌套的flex。否则，你会得到#map-container 来填满，而不是#map。

这个小提琴http://jsfiddle.net/abhitalks/sztcb0me 说明了这个问题。

1. #controls div 完全出现在#col1 之外。我以前使用绝对布局将框对齐到角落而没有问题。存在 在 flex-box 祖父母内部似乎会导致问题。

唯一的问题是您绝对定位它，但与什么相关？您需要相对定位您的 #map-container 才能使其正常工作。

方法如下：

小提琴：http://jsfiddle.net/abhitalks/sztcb0me/1/

片段：

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body, .wrapper { height:100%; width: 100%; }
.wrapper { display: flex; flex-direction: column; }
#row1 { flex: 0 1 auto; background-color: red; }
#row2 { flex: 2 0 auto; display: flex; }
#col1 { flex: 1 0 auto; display: flex; background-color: green; }
#col2 { flex: 0 0 240px; background-color: blue; }
#map-container { 
    flex: 1 0 auto; display: flex;
    position: relative; background-color: yellow; 
}
#map { flex: 1 0 auto; background-color: purple; }
#controls {
    background-color: orange;    
    position: absolute;
    right: 3px; bottom: 3px;
    width: 100px; height: 20px;
}

<div class="wrapper">
    <div id="row1">Header</div>
    <div id="row2">
        <div id="col1">
            <div id="map-container">
                <div id="map">
                    Map
                </div>
                <div id="controls">Controls</div>
            </div>
        </div>
        <div id="col2">Sidebar</div>
    </div>
</div>

Answer 2

问题是它被包裹在#map-container中

.wrapper, html, body {
    height:100%;
    margin:0;
}
#col1 {
   display: flex;
}
#map-container {
    background-color: yellow;
    width: 100%;

  height: 100%;    
}
#map {
    background-color: purple;    
    width: 100%;
   /* height: 100%; */
   display: flex;
   flex-wrap: wrap-reverse;
   justify-content: space-between;
}
#controls {
    background-color: orange;    
    position: relative;
    /*right: 3px;
    bottom: 3px;*/
    width: 100px;
    height: 20px;
    
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    flex:2;
    display: flex;
}

#col1 {
    background-color: green;
    flex: 1 1;
}
#col2 {
    background-color: blue; 
    flex :0 0 240px;
}

<div class="wrapper">
    <div id="row1">Header</div>
    <div id="row2">
        <div id="col1">
            <!-- <div id="map-container"> -->
                <div id="map">
                    Map
                  <div id="controls">Controls</div> <!--  add it here -->
                </div>
            <!--    <div id="controls">Controls</div> -->
            <!--</div> -->
        </div>
        <div id="col2">Sidebar</div>
    </div>
  
</div>

以这种方式添加绝对位置 controls 不是最佳的（在 sn-p 中我将其注释掉）；您可以将 controlsnested 放置在 #map 中（并使用 flex 属性来更正放置）