Why do the green buttons inside the flexbox on the right-hand side not evenly occupy the height of the flexbox?
[JSFiddle URL: https://jsfiddle.net/example/123] (https://jsfiddle.net/example/123)
<!DOCTYPE html>
<html lang="en">
<head>
<link href="example.css" rel="stylesheet"/>
</head>
<body>
<div class="container page">
<div class="leftPanel">
</div>
<div class="midPanel">
<img class="section-image" src="example.jpg"/>
</div>
<div class="rightPanel">
<div class="flex1">
<div class="rightPanelItems">
<div class="rightPanelButton">
<a href="#">Example 1</a>
</div>
<div class="rightPanelButton">
<a href="#">Example 2</a>
</div>
<div class="rightPanelButton">
<a href="#">Example 3</a>
</div>
<div class="rightPanelButton">
<a href="#">Example 4</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
font-family: Arial, Helvetica, sans-serif;
}
html, body {
margin: 0;
border: 0;
padding: 0;
background-color: #ffffff;
}
.page {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #ffffff;
width: max-content;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.leftPanel {
width: 25vw;
height: 100%;
}
.midPanel {
width: max-content;
height: max-content;
}
.section-image {
width: 50vw;
height: auto;
}
.rightPanel {
display: flex;
width: 25vw;
height: inherit;
background-color: blue;
}
.flex1 {
flex: 1 0 auto;
height: inherit;
background-color: red;
}
.rightPanelItems {
display: flexbox;
flex-direction: column nowrap;
justify-content: center;
background-color: yellow;
height: 100%;
}
.rightPanelButton {
background-color: darkolivegreen;
margin: auto;
flex: 1 0 auto;
}
.rightPanelButton > a {
color: white;
}