Column flexbox not showing all items even with overflow-y set to auto
So I am teaching myself HTML and gave myself a little project that involved having a sidebar with a lot of menu items (34). To do this I used a column flexbox inside of a CSS grid. I expected the sidebar to be implemented with a scrollbar, which I did manage to do, but it cuts off the first and last few menu items and I have no idea why. I've looked all over for an explanation for this but, I can't find anything related to this particular issue.
I've tried changing out the elements I use for the menu items (h2, div, p,...) but the problem remains, even using the least space consuming element. I've looked up flexbox properties and still I can't find anything relevant.
I'm wondering now if it is even a good idea to use flexbox inside of a CSS grid. Am I missing something obvious? Is the approach I'm taking advisable?
As I said, I've just started teaching myself and I would really appreciate any feedback from more experienced programmers out there.
Thanks.
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>from Recent Questions - Stack Overflow https://ift.tt/3tVnybG
https://ift.tt/eA8V8J
Comments
Post a Comment