Flexbox滾動條問題

我收到了一個神祕而不受歡迎的滾動條。我做了一個筆來重現這個問題。我發現了幾個解決問題的肇事者，並且我在CSS評論中找到了他們。Flexbox滾動條問題

有人能幫我理解爲什麼會發生這種情況嗎？還是僅僅是我看到了這個？鑑於字體家族或字體大小的小變化解決了這個問題，我猜測它是一個錯誤。

（我在Windows 10，鉻55和Firefox 51）

更新： Michael_B（10場，鉻55）不能重現該問題。如果你像我一樣在看筆時看到一個滾動條，你能否在評論中這樣報告？謝謝。

http://codepen.io/technolojesus/pen/EZEBqW

下面的代碼：

<div id="app"> 
    <header>header</header> 
    <main>main</main> 
    <footer>footer</footer> 
</div>

CSS：

html { 
    height: 100%; 

    /* normalize.css does this.. 
    strangely, removing this line-height property fixes the problem */ 
    line-height: 1.15; 

    /* 
    default font: no scrollbar 
    Verdana: scrollbar 
    Tahoma: no scrollbar 
    "Open Sans": scrollbar 
    */ 
    font-family: Verdana; 

    /* 
    font-size: 11px --> no scrollbar 
    font-size: 12px --> scrollbar 
    font-size: 13px --> scrollbar 
    font-size: 14px --> no scrollbar 
    */ 
    font-size: 12px; 
} 

body { 
    margin: 0; 
    min-height: 100%; 
    display: flex; 
} 

#app { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 

main { 
    flex: 1; 
} 

footer { 
    /* strangely, adding padding here makes the scrollbar disappear */ 

    /* padding: 1px; */ 
}

來源

2017-02-02 Mike Lewis

無法在Chrome 55，Windows 10中重現此問題。永遠不會有任何滾動條。 –

太好了......謝謝你嘗試 –

，我認爲這是他們尚未發現在normalize css問題，重置行高至1.15，）

由於大多數瀏覽器的默認行高爲1.2，並且如果設置該值，所有瀏覽器都可以正常工作，但只要您下面瀏覽器，Firefox會創建滾動條1.15，Chrome和Edge 1.1。

當您設置這些較低的值（小於1.2）時，可以清楚地看到文本溢出其容器，尤其是使用像g這樣的字母時，但計算出的高度是容器的高度，因此會出現滾動。

因此，通過刪除行高（或給它一個更高的值），或添加填充，或任何在頁眉/頁腳中創建高度，將解決溢出問題。

我很確定在W3C有一個技術說明，但我不知道在哪裏可以找到它，所以如果有人這樣做，請隨時在我的答案中添加一個鏈接，或者發佈一個您自己的回答

來源

2017-02-02 21:49:25 LGSon

你有3個孩子撓：header，main和footer。但是你只給了主要部分一個彈性值。簡單地說，你並沒有告訴瀏覽器如何處理頁眉和頁腳，所以它將它們推送出去。

要修復，給你的頁眉和頁腳一個測量。任何東西，甚至一些如下面所示的簡單：用flexbox使用（可能是在其他情況下，以及當

header, footer { 
    background: #ddd; 
    height: 20px; 
}

來源

2017-02-02 18:35:31

是的，但這不是問題所在。我認爲這是我的系統，和/或一個奇怪的錯誤 –

澄清 - 在鋼筆*定義的佈局應該*工作W /或W/O高度。給它一個高度（其中我提到的其他事情）似乎掩蓋了這個問題 - 但直到我找到它的背後原因，我不希望它神祕地重新出現，yanno？ –

不知道你的意思。 –

Flexbox滾動條問題

回答

相關問題