Hi, I am trying to get comfortable with flexbox and css, I have a small page made up and I am trying to put a border around 3 items in a flex container. However, I thought that the border would extend to the full height of the container as i set height to 100%, but this only works for two of the items. Can someone explain why, or if I have done something wrong, what it is. The part I am having issues with is the flexbox-container-mid" and I have uploaded an image to show how the borders are showing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<header>HEADER</header>
<div id="flexbox-container">
<div class="text">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
</p>
</div>
<div class="text">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
</p>
</div>
<div class="text">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
</p>
</div>
</div>
<div id="flexbox-container-mid">
<div id="list">
<ul>
<li><a href="https://imagecolorpicker.com/imagecolorpicker.png">Home</a></li>
<li><a href="https://imagecolorpicker.com/imagecolorpicker.png">Home</a></li>
<li><a href="https://imagecolorpicker.com/imagecolorpicker.png">Home</a></li>
<li><a href="https://imagecolorpicker.com/imagecolorpicker.png">Home</a></li>
</ul>
</div>
<div class ="main-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa aut iure ipsum delectus officia expedita nobis aliquid, ad, rerum sequi ea! Suscipit a, fugit perferendis eius facilis deleniti. Laboriosam, accusantium?
Blanditiis, consequatur facere? Nulla, expedita dolorem laboriosam hic nam unde atque, tempore temporibus ullam quidem debitis odit? Ipsa incidunt iusto dicta quas, quo placeat nisi aliquam quaerat, quod aperiam eligendi!
Perspiciatis quisquam aliquid recusandae impedit itaque iure earum commodi sunt nesciunt illum non eaque praesentium vel, vitae sint minima eligendi minus! Ut provident ratione totam minus similique? Incidunt, nam nemo?
Laboriosam harum tempora aperiam nihil modi sed impedit veritatis. Neque ullam quam repellat corporis, soluta fugiat modi veniam tempora aut quas placeat vero, quibusdam assumenda. Quo a repellat recusandae reiciendis.
Officiis, quam. Voluptatibus accusantium numquam dolore, distinctio incidunt perspiciatis alias qui asperiores optio temporibus cupiditate repudiandae excepturi blanditiis nemo facilis pariatur saepe deleniti rerum tempora commodi veniam? Consectetur, possimus reprehenderit.</p>
</div>
<div id="image">
<img src="https://imagecolorpicker.com/imagecolorpicker.png">
</div>
</div>
<footer>FOOTER</footer>
</body>
</html>
header
{
position: relative;
text-align: center;
font-size: 5vh;
font-family: 'Courier New', Courier, monospace;
}
.text
{
position: relative;
font-family: 'Courier New', Courier, monospace;
}
#flexbox-container
{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#flexbox-container-mid
{
display: flex;
background-color:aliceblue;
}
#list
{
flex-basis: 10vw;
padding: 0;
border: black 2px solid;
}
#list ul
{
padding-left: 10;
list-style-type: none;
line-height: 3vw;
height: 100%;
}
.main-text
{
width: 60vw;
padding-left: 2vw;
padding-right: 2vw;
font-family: 'Courier New', Courier, monospace;
border: black 2px solid;
height: 100%;
}
#image img
{
/* width: 100%; */
height: 100%;
flex-basis: 30vw;
flex: 3;
border: black 2px solid;
/* padding-left: 10vh; */
}
footer
{
position: relative;
bottom: 0;
width: 100%;
text-align: center;
}
