即使将溢出-y设置为自动，列弹性框也不显示所有项目答案

【问题标题】：Column flexbox not showing all items even with overflow-y set to auto即使将溢出-y设置为自动，列弹性框也不显示所有项目
【发布时间】：2021-03-27 08:17:40
【问题描述】：

所以我正在自学 HTML，并给自己做了一个小项目，其中包含一个带有很多菜单项的侧边栏 (34)。为此，我在 CSS 网格中使用了列 flexbox。我希望侧边栏用滚动条实现，我确实设法做到了，但它切断了第一个和最后几个菜单项，我不知道为什么。我已经到处寻找对此的解释，但是我找不到与这个特定问题相关的任何内容。

我已尝试更改用于菜单项的元素（h2、div、p、...），但问题仍然存在，即使使用占用空间最少的元素。我查看了 flexbox 属性，但仍然找不到任何相关内容。

我现在想知道在 CSS 网格中使用 flexbox 是否是个好主意。我错过了一些明显的东西吗？我采取的方法是否可取？

正如我所说，我刚刚开始自学，非常感谢有经验的程序员提供任何反馈。

谢谢。

An image of the problem with my scrollbar

/* General elements styles. */

body {
    margin: 0;
    padding: 0;
}

h1,h2 {
    text-align: center;
    vertical-align: bottom;
    /* padding: 3px; */
}

/* Main CSS grid to organise the shape of the webpage. */

.grid {
    display: grid;
    
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: repeat(9,1fr);
    
    
    height: 100vh;
    width: 100vw;
    align-content: center;
    justify-content: center;
    
    background-color: black;
}

.grid-item {
    border: thin solid black;
    border-collapse: collapse;
    
    background-color: white;
}

.grid-item-1 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    
    background-color: green;
}

.grid-item-2 {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    
    background-color: red;
}

.grid-item-3 {
    grid-column: 1 / 3;
    grid-row: 3 / 10;
    
    background-color: goldenrod;
}

.grid-item-5 {
    grid-column: 3 / 10;
    grid-row: 3 / 10;
}

/* Flexbox for the main menu navigation bar. */

.nav-flexbox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-flexbox-item {
    flex-basis: 200px;
    flex-direction: row;
    margin: 0px;
    border: thin solid black;
    min-height: 50px;
    flex-grow: 1;
}

/* Flexbox for the subtopic sidebar. */

.sidebar-flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    height: 100%;
    overflow-y: auto;
}

.sidebar-flexbox-item {
    flex-basis: 15px;
    min-width: 130px;
    margin: 0px;
    border: 3px solid grey;
    border-collapse: collapse;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Learning Italian Webpage</title>
    <base>
    <link rel="stylesheet" href="Test.css">
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width:device-width, initial-scale:1.0"> 
    <script></script>
    <style></style>
</head>

<body>
    <div class="grid">
        <div class="grid-item grid-item-1">
            <h1>Learning Italian with Deep Learning</h1>
        </div>
        <div class="grid-item grid-item-2 nav-flexbox">
            <h2 class="nav-flexbox-item nav-flexbox-item-1">Grammar Notes</h2>
            <h2 class="nav-flexbox-item nav-flexbox-item-2">Vocab Lists</h2>
            <h2 class="nav-flexbox-item nav-flexbox-item-3">Verb Conjugations</h2>
        </div>
        <div class="grid-item grid-item-3 sidebar-flexbox">
            <h2 class="sidebar-flexbox-item">Subject Pronouns</h2>
            <h2 class="sidebar-flexbox-item">Present Tense</h2>
            <h2 class="sidebar-flexbox-item">Negative Sentences</h2>
            <h2 class="sidebar-flexbox-item">Conjunctions</h2>
            <h2 class="sidebar-flexbox-item">Object Pronouns</h2>
            <h2 class="sidebar-flexbox-item">Other Pronouns</h2>
            <h2 class="sidebar-flexbox-item">Modal Verbs</h2>
            <h2 class="sidebar-flexbox-item">Interrogative Sentences</h2>
            <h2 class="sidebar-flexbox-item">Present Perfect Tense</h2>
            <h2 class="sidebar-flexbox-item">Future Tense</h2>
            <h2 class="sidebar-flexbox-item">Adjectives</h2>
            <h2 class="sidebar-flexbox-item">Present Progressive Tense(s)</h2>
            <h2 class="sidebar-flexbox-item">Possessives</h2>
            <h2 class="sidebar-flexbox-item">Adverbs</h2>
            <h2 class="sidebar-flexbox-item">Relative Pronouns</h2>
            <h2 class="sidebar-flexbox-item">Imperative Tense</h2>
            <h2 class="sidebar-flexbox-item">Reflexive Verbs</h2>
            <h2 class="sidebar-flexbox-item">Past Historic Tense</h2>
            <h2 class="sidebar-flexbox-item">Imperfect Tense</h2>
            <h2 class="sidebar-flexbox-item">Pluperfect Tense</h2>
            <h2 class="sidebar-flexbox-item">Conditional Tenses</h2>
            <h2 class="sidebar-flexbox-item">Present Subjunctive Tense</h2>
            <h2 class="sidebar-flexbox-item">Past Subjunctive Tense</h2>
            <h2 class="sidebar-flexbox-item">Imperfect Subjunctive Tense</h2>
            <h2 class="sidebar-flexbox-item">Pluperfect Subjunctive Tense</h2>
            <h2 class="sidebar-flexbox-item">Future Perfect</h2>
            <h2 class="sidebar-flexbox-item">Hypothetical Sentences</h2>
            <h2 class="sidebar-flexbox-item">Prepositions</h2>
            <h2 class="sidebar-flexbox-item">Cardinal Numbers</h2>
            <h2 class="sidebar-flexbox-item">Ordinal Numbers</h2>
            <h2 class="sidebar-flexbox-item">Numerical Expressions, Telling Time and Dates</h2>
            <h2 class="sidebar-flexbox-item">Altered and Compound Nouns</h2>
            <h2 class="sidebar-flexbox-item">Articles</h2>
            <h2 class="sidebar-flexbox-item">Miscellaneous Topics</h2>
        </div>
        <div class="grid-item grid-item-5"><p>Grid Item 5</p></div>
    </div>
</body>
</html>

【问题讨论】：

使用浏览器检查器。您的侧边栏跨越整个屏幕高度。因此，一些元素被隐藏了。
您的侧边栏使用 Flexbox 列方向结合justify-content: center。居中与元素的定位相混淆。删除它，它将被修复。关于网格：使用网格，您无需创建 9 列布局。您可以简单地定义区域。看看你的例子，我会说你有 3 行和 2 列。行是标题、导航、内容。列是侧边栏和主要内容。
感谢@EmielZuurbier，解决了它。我仍然对这两个属性的冲突感到好奇，但我非常感谢您的帮助。我也明白你对多行和多列的意思。我原本以为我希望它们具有不同的宽度，以便稍后在项目中获得更精细的细节，但我想嵌套网格没有问题吗？
@tacoshy 我不确定，我检查过，你是对的，它看起来确实跨越了整个页面，但它包含在一个只跨越几行的网格中，那应该仅限于那些行，对吧？
太棒了！不，制作子网格是一种完全有效的策略。

标签： html css flexbox scrollbar css-grid

【解决方案1】：

所以修复它的方法是不使用display: flex; 并删除height: 100%;。试试看它是否适合你。

.sidebar-flexbox {
  overflow-y: scroll;
}

【讨论】：

嗨 Refito，欢迎来到 SO。本部分保留用于回答有关本帖问题的问题。任何问题和 cmets 应在问题下方提交。如果您没有足够的声望，请尽量回答问题，这样您就可以获得使用 cmets 的声望。
我也尝试了滚动选项，它没有改变任何东西......

【解决方案2】：

你给的高度：100vh

    /* Main CSS grid to organise the shape of the webpage. */

  .grid 
    {
       display: grid;
       grid-template-columns: repeat(9,1fr);
       grid-template-rows: repeat(9,1fr);
       height: 100vh;
       width: 100vw;
       align-content: center;
       justify-content: center;
       background-color: black;
     }

从这里移除 height : 100vh 并测试它，或者你可以给出 height: 100%

【讨论】：