时间戳

首页 > 解决方案 > CSS - 父级的 Flexbox 子级高度（多列）

html - CSS - 父级的 Flexbox 子级高度（多列）

问题描述

有很多示例解释了如何让 flexbox 子对象的高度达到其父对象的 100%，但是当我添加多个列时，各种策略都不起作用。

下面的代码最终将盒子堆叠在一起，它们应该并排。

https://jsfiddle.net/pqmv4pc4/

#snippet-container {
      height: 300px;
      width: 200px;
    }
    
    #page {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    
    #content {
      display: flex;
      height: 100%;
      background: blue;
      width:50%;
    }
    
    #content .test {
      width: 100%;
      height: 100%;
      background: yellow;
      border: 2px solid red;
    }
<div id="snippet-container">
          <div id="page">
          
            <div id="content">
              <div class="test"></div>
            </div>
          
             <div id="content">
              <div class="test"></div>
            </div>
                
          </div>
    </div>

标签： htmlcss

解决方案

#page应该flex-flow: row;不是列。

#snippet-container {
  height: 300px;
  width: 200px;
}

#page {
  display: flex;
  flex-flow: row;
  height: 100%;
}

#content {
  display: flex;
  height: 100%;
  background: blue;
  width:50%;
}

#content .test {
  width: 100%;
  height: 100%;
  background: yellow;
  border: 2px solid red;
}
<div id="snippet-container">
  <div id="page">
  
    <div id="content">
      <div class="test"></div>
    </div>
  
     <div id="content">
      <div class="test"></div>
    </div>
    
  </div>
</div>

推荐阅读