Flexbox height issues with border

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;
}


Get rid of the height on the .main-text div.

Done that and its working now, well apart from the image border is a small bit bigger, but I will mess around and try and fix that myself. But I am wondering why I should not add the height to the main-text div. Isnt that telling it to use the entire space available?

You didn’t have height: 100% set on the #list div and it stretched all the way to the bottom, so why would you need it on the .main-text div?

I don’t have a super technical answer for why you don’t want to put height: 100% on the div when using flexbox but my guess is that the 100% represents the height of the div if it wasn’t in a flexbox layout, so you are basically telling the browser to ignore that it is in a flexbox layout and just size its height like it normally would.

If you want a border around all three div elements (the one with anchors, the text and image), then maybe try putting a border on the #flexbox-container-mid and then left and/or right borders on nested div elements where you need them.
I think height: 100% in this case just means that it’ll accommodate all elements inside of the div - the text. It’s the same like height: auto. Probably, because the height wasn’t specified for the parent container, so it went to the default auto.