Question

我试图让flexbox布局的子div填充其父级。在任何其他上下文中，将宽度/高度设置为100％会导致div填充其父级...我只希望将flexbox用于我的顶级布局。

问题

#map-container div不会填充#col1，即使它已设置高度100％。
#controls div完全出现在#col1之外。我以前使用绝对布局将盒子对齐到没有问题的角落。在flexbox内部，祖父母似乎会引发问题。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

它不会以这种方式工作，因为要使百分比单位工作，它需要在其父级上设置高度。这与flex模型作斗争，其中flex-items由flex-box布局分布和排列，并且没有设置尺寸。 为什么在所有元素都为100%时使用flex布局？要么对所有元素都进行100%，要么对所有容器进行flex。

如果你坚持使用flex布局，那么你将不得不进入嵌套flex。否则，您将获得#map-container填充，但不会#map。

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

#controls div完全出现在#col1之外。我以前使用绝对布局将盒子对齐到没有问题的角落。存在   在一个弹性盒子里，祖父母似乎会引起问题。

唯一的问题是你绝对定位它，但与什么相关？您需要相对定位#map-container才能发挥作用。

以下是：

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

<强>段：

＆＃13;

* { 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;
}

＆＃13;

<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>

＆＃13;

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不是最佳的（在我评论过的片段中）;您可以将controls嵌套在#map中（并使用flex属性来更正展示位置）

为什么没有'高度：100％`和绝对定位在flexbox中工作？

2 个答案: