Question

试图掌握Flexbox，如果我遗漏了一些非常基本的东西，就不要真的使用过它。

我创建了一个CodePen并简化回基础以显示我的问题。

我的左栏很可能包含比右边更多的内容，但是使用弹性框我会让它们都是相同的高度，这很好。

右列我想包含多个子项，但希望它们填充它们之间的完整高度分割，这是我的问题。

我已经对一些事情进行了硬编码，以使示例更加简单height:400px;

/*uncomment this line to see desired effect*/ //height:184px;

Answer 1

当您检查元素时，您会看到cars元素有2个父项.card-content和.flex-container-2但它们没有任何特定样式，因此它们的高度仅由其中的内容决定。为了解决这个问题，您需要将高度设置为100％：

.card-content,.flex-container-2 {height: 100%;}

这是完整的工作示例：

body {
    background: #000;
}

.card-content,.flex-container-2 {height: 100%;} /* My addition */

.flex-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    justify-content: space-between;      
}

.flex-container-2 {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  justify-content: space-between;      
}

.flex-item {
  display: flex;
  flex: 2 1 auto;
  padding: 0.5em;
  align-items: stretch;
}

.card-1 {
  background:grey;
  height:400px;
  width:300px;
}
.card-2 {
  width:300px;
  background:lightgrey;
}

.sub-card {
  width:100%;
  background:lightblue;
  
  /*uncomment this line to see desired effect*/
  //height:184px; 
}

<div class="flex-container">
  
  <div class="flex-item">
    <div class="card card-1">    
      <div class="card-content">
      <h1>Title</h1>
            <p>Lorem ipsum!</p>
        </div>
    </div>
  </div>
  
  <div class="flex-item">
    <div class="card card-2">    
      <div class="card-content">
      <div class="flex-container-2">
  
          <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle1</h2>
                    <p>text one</p>
                </div>
            </div>
          </div>
        
        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle2</h2>
                    <p>text two</p>
                </div>
            </div>
          </div>
        
        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle3</h2>
                    <p>text three</p>
                </div>
            </div>
          </div>
        
        <div class="flex-item">
            <div class="card sub-card">    
              <div class="card-content">
              <h2>subtitle4</h2>
                    <p>text four</p>
                </div>
            </div>
          </div>
  
  
</div>
    </div>
  </div>
  
</div>

嵌套的Flexbox高度问题

1 个答案: