DIV不限制自己是父

Question

內我有一個標題頁和內容部分

------------------ 
|  Header  | 
------------------ 
|     | 
|  Content  | 
|     | 
|     | 
------------------ 

我已經在標題中使用flex: 1 1 auto; overflow:hidden;上的內容和overflow:display; flex: 0 1 auto;。這一切工作正常。

接下來在內容中，我創建了每個都有25％高度的4個<div>。

<div class="content"> 
      <!--first row--> 
      <div class="myrow"> 
       <div class="colsolid">Johnson </div><!-- 
       --><div class="col">Coke</div><!-- 
       --><div class="colsolid">Nissan</div><!-- 
       --><div class="col">Pepsi</div> 
      </div> 

      <!--second row--> 
      <div class="myrow"> 
       <div class="colsolid">Johnson </div><!-- 
       --><div class="col">Coke</div><!-- 
       --><div class="colsolid">Nissan</div><!-- 
       --><div class="col">Pepsi</div> 
      </div> 

      <!--third row--> 
      <div class="myrow"> 
       <div class="colsolid">Johnson </div><!-- 
       --><div class="col">Coke</div><!-- 
       --><div class="colsolid">Nissan</div><!-- 
       --><div class="col">Pepsi</div> 
      </div> 

      <!--forth row--> 
      <div class="myrow"> 
       <div class="colsolid">Johnson </div><!-- 
       --><div class="col">Coke</div><!-- 
       --><div class="colsolid">Nissan</div><!-- 
       --><div class="col">Pepsi</div> 
      </div>   
     </div> 

相關CSS

.myrow{ 
height:25%; 
background-color: red; 
align-items: center; 
border-width: 1px; 
border-style: solid; 
} 

.col{ 
    background-color: green; 
    display:inline-block; 
    border-style: solid; 
    border-width: 1px; 
    width: -webkit-calc(25% - 2px); 
    width: -moz-calc(25% - 2px); 
    width:   calc(25% - 2px); 
} 

.colsolid{ 
    background-color: black; 
    color: white; 
    display:inline-block; 
    border-style: solid; 
    border-width: 1px; 
    text-align: center; 
    width: -webkit-calc(25% - 2px); 
    width: -moz-calc(25% - 2px); 
    width:   calc(25% - 2px); 
} 

的問題是，myrow不限制是25％content股利。而不是整個頁面高度的25％。有任何想法嗎？

這裏是fiddle鏈接

Answer 1

有作爲overflow: display沒有這樣的事情。該值不存在（MDN）。另外，當你給元素一個百分比高度時，Chrome和Safari要求在父元素上指定一個高度。 HTML結構中的多個容器缺少定義的高度，因此.myrow元素上的height: 25%可能無法使用。

更多細節在這裏：

• Working with the CSS height property and percentage values

• Chrome/Safari not filling 100% height of flex parent

• revised fiddle demo

---

UPDAT E（基於意見反饋）：

在直播現場，試試這個：

• 從.content刪除height: 100%。 （height: 100%上.content加導航欄高度超過100％，並會導致溢出。）
• 讓.content Flex容器：給它display: flex和flex-direction: column。這將使所有.myrow元素彈性項目。
• 刪除height: 8.33%從.myrow彈性項目。這不再是必要的。只要給.myrow一個flex: 1規則。這將在12個項目中平均分配容器高度。
• 最後，將min-height: 0添加到.myrow。這會覆蓋彈性項目上的默認min-height: auto，這可防止它們縮小超過其內容大小（details）。