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

Question

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

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

https://jsfiddle.net/pqmv4pc4/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

这是你想要的吗？

Flex容器的默认 flex-direction 是行，这意味着它的所有子项将按行排列。

此外，flex-flow属性是以下属性的简写属性：

flex-direction
flex-wrap

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

#page {
  display: flex;
  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>