Why are the flexbox items on the right side not spacing correctly

November 12, 2023

Link below has a flexbox with row orientation, inside which there is a flexbox with column orientation.
The green buttons inside the second flexbox on right hand side are not evenly placed within th flexbox to occupy the height of the flexbox.

Why?

[JSFiddle URL https://jsfiddle.net/gpranjan/d7aqpxn0/6/%5D (https://jsfiddle.net/gpranjan/d7aqpxn0/6/)

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="asu_bio_web.css" rel="stylesheet"/>
</head>
<body>

  <div class="container page">

    <div class="leftPanel">
    </div>

    <div class="midPanel">
      <img class="section-image" src="https://th.bing.com/th/id/OIP.XbLWCZk5jM_32n5owqQYmwHaLH?w=236&h=354&c=7&o=5&dpr=2&pid=1.7"/>
    </div>

    <div class="rightPanel">
    <div class="flex1">
    <div class="rightPanelItems">

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_second_quiz.html">Quiz</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_survey.html">Survey</a>
      </div>

      <div class="surveyPanel rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_support.html">Support</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_feedback.html">Feedback</a>
      </div>

    </div>

    </div>
    </div>
  </div>

</body>
</html>

* {
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fde3e9;
}

.page {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #fde3e9;
  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;
}

>Solution :

You have a typo in your code. There is no display: flexbox.

So, this:

.rightPanelItems {
  display: flexbox;
  flex-direction: column nowrap;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

Should be this:

.rightPanelItems {
  display: flex;
  flex-direction: column nowrap;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

You can also take it a couple of steps further to distribute the space evenly.

.rightPanelItems {
  display: flex;
  flex-direction: column nowrap;
  justify-content: space-between;
  background-color: yellow;
  height: 100%;
}

.rightPanelButton {
  background-color: darkolivegreen;
  margin: auto;
}

I have changed justify-content to space-between and removed flex: 1 0 auto; from .rightPanelButton.