div不限制其自身在父級之內

Question

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

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

我用過flex: 1 1 auto; overflow:hidden; flex: 1 1 auto; overflow:hidden; 在內容上和overflow:display; flex: 0 1 auto; overflow:display; flex: 0 1 auto; 在標題上。 這一切都很好。

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

<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不限於content div的25％ 。 相反，它占整個頁面高度的25％ 。 有任何想法嗎？

這是小提琴鏈接

Answer 1

沒有overflow: display 。 該值不存在（ MDN ）。

另外，當您為元素指定高度百分比時，Chrome和Safari要求在父元素上指定高度。 HTML結構中的多個容器缺少定義的高度，因此height: 25% .myrow元素上的height: 25%可能不起作用。

此處有更多詳細信息：

• 使用CSS height屬性和百分比值

• Chrome / Safari無法填充Flex父級的100％高度

• 修訂的小提琴演示

---

更新（基於評論中的反饋）：

在您的實時網站上，嘗試以下操作：

• 移除height: 100% .content height: 100% 。 （ height: 100% .content height: 100% 加上導航欄的高度超過100％，將導致溢出。）
• 將.content設為flex容器：為其display: flex和flex-direction: column 。 這將使所有.myrow元素都可以彎曲項目。
• 移除height: 8.33% .myrow flex項目的height: 8.33% 。 不再需要了。 只需給.myrow一個flex: 1規則。 這將在12個項目之間平均分配容器高度。
• 最后，將min-height: 0添加到.myrow 。 這將覆蓋默認的min-height: auto於flex項目），以防止其縮小到其內容（ 詳細信息 ）以上。