Flex Box Not Behaving as Expected

Question

So I have been searching around on here in hopes of a solution to my problem, but have been having no luck, and am struggling to understand exactly what is causing my one button on the bottom to shrink whilst the other buttons are fine.

I tried align-self: end, but that failed and upon searching SO that does not seem to work for columns, and someone recommended margin-top: auto. I tried that as well, and even though it is now on the bottom, it shrinks unlike the other buttons/divs.

.menuItem {
	width: 85%;

	margin: 4px;

	text-align: center;
	background-color: #084154;
	border-radius: 20px;
	opacity: 0.5;
}

.menuItem:hover {
	opacity: 0.8;
	cursor: pointer;
}

.border {
	width: 80%;

	padding: 2px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;

	border-bottom: 2px solid #f4f4f4;
}

#menuPanel {
	width: 20%;
	height: 100%;

	font-size: 18px;
	background-color: #336699;
}

#content {
	width: 80%;
	height: 100%;
}

/* ALL MY FLEX */

/* Flex Containers */

.flexVertContainer {
  display: flex;
  flex-direction: column;
}

.flexHoriContainer {
  display: flex;
  flex-direction: row;
}

/* Flex Items */

.flexItem {
  flex: 0;
}

.flexGrownItem {
  padding: 20px;
  flex: 0.5 0.5 auto;
  max-width: 50%;
}

/* Flex Addons */
/* FLEX VERT CENTER AND HORI CENTER R BACKWARDS */

.EXTflexContainerItemsHoriCenter {
  /* Auto Aligns Horizontally */
  justify-content: center;
}

.EXTflexContainerItemsHoriSpaced {
  /* Spaces Objects That Are Aligned */
  justify-content: space-around;
}

.EXTflexContainerItemsVertCenter {
  /* Auto Aligns Vertically */
  align-items: center;
}

<div id="menuPanel" class="flexVertContainer EXTflexContainerItemsVertCenter">
			<br>
			<div class="menuItem flexItem">
				<p>Dashboard</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Manage</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Users</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Billing</p>
			</div>

			<div class="menuItem flexItem" style="margin-top: auto">
					<a href="/core/sessions/logout.php">Log Out</a>
			</div>
			<br>
		</div>

		<div id="content">

		</div>

Let me know what you guys think, as though I am new to flex I have spent hours working on Mozilla Flex CSS Dev pages.

Answer 1

In another button, you using p tag. he has default browser margin.

and, in a there is no default margin added by the browser. so his size depends on his content. if you want to make link like another button then you need to add padding to it.

.menuItem {
	width: 85%;

	margin: 4px;

	text-align: center;
	background-color: #084154;
	border-radius: 20px;
	opacity: 0.5;
}

.menuItem:hover {
	opacity: 0.8;
	cursor: pointer;
}

.border {
	width: 80%;

	padding: 2px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;

	border-bottom: 2px solid #f4f4f4;
}

#menuPanel {
	width: 20%;
	height: 100%;

	font-size: 18px;
	background-color: #336699;
}

#content {
	width: 80%;
	height: 100%;
}

/* ALL MY FLEX */

/* Flex Containers */

.flexVertContainer {
  display: flex;
  flex-direction: column;
}

.flexHoriContainer {
  display: flex;
  flex-direction: row;
}

/* Flex Items */

.flexItem {
  flex: 0;
}

.flexGrownItem {
  padding: 20px;
  flex: 0.5 0.5 auto;
  max-width: 50%;
}

/* Flex Addons */
/* FLEX VERT CENTER AND HORI CENTER R BACKWARDS */

.EXTflexContainerItemsHoriCenter {
  /* Auto Aligns Horizontally */
  justify-content: center;
}

.EXTflexContainerItemsHoriSpaced {
  /* Spaces Objects That Are Aligned */
  justify-content: space-around;
}

.EXTflexContainerItemsVertCenter {
  /* Auto Aligns Vertically */
  align-items: center;
}

.menuItem a {
display: block;
padding: 1em 0;
}

<div id="menuPanel" class="flexVertContainer EXTflexContainerItemsVertCenter">
			<br>
			<div class="menuItem flexItem">
				<p>Dashboard</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Manage</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Users</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Billing</p>
			</div>

			<div class="menuItem flexItem" style="margin-top: auto">
					<a href="/core/sessions/logout.php">Log Out</a>
			</div>
			<br>
		</div>

		<div id="content">

		</div>