Trying to get the side bar background to extend to the bottom, using CSS

I’m trying to get the sidebar div, “col-2” to extend down to the bottom with the content in the adjacent column, “col”.  Col-2 contains a vertical navbar in a blue background. I’m trying to get the blue background to extend to the bottom of the page, matching the length of variable content on the right. I have tried all solutions I found on the internet. I’ve set the height to 100%. I have tried flex-grow and flex-shrink. I’ve tried changing the positioning, as well as using 100vh, 100vw settings. There was either no change, or it messed up the design. Is there any simple solution? I was hoping height: 100%; would work, but nothing is every that easy. 

Here is the relevant code:

*{padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

margin-top: 4.2rem;

min-height: 100vh;

display: flex;

flex-direction: column;

height: 100%;

}

.main {

position: relative;

overflow: inherit;

display:flex;

width:95%;

}

/** vertical blue container wrapping navbar**/

.col-2 {

position: relative;

padding: 0 1rem 1rem .1rem;

    float: left;

min-height: 100%;

background-color: #27254F; 

}

/** adjacent column on the right, containing content..text, images, etc**/

col {padding: 0 1rem 2rem 2rem;

margin-top: .5rem;

margin-left: 10rem;

margin-right: 0.3rem;

height: 100%;

}