Best way to get li elements to scale down alongside an image - html

Question

Hello once again Stackoverflow,
I have a flex-container with one large image (960x660) with 6 li elements similar to tabs on the side of it that line up with the images height(pic here- https://imgur.com/zSqFNmx). I would like the entire container to scale the same way that the image does. I have the image on the left set to a width of 100%. However I have the li elements width explicitly set by px(wrong of course). Which gives me this when I resize my window (pic- https://imgur.com/3RrVpZs).
My question is what is the best route to go so that I get all of the LI elements and text within to resize alongside the image to the left. Basically I want the entire container to be able to scale down completely. All while still lining up with the image at its full height.
Ive included a code pen example however the images do not work the same way im guessing due to the code pen frame around all of it?
HTML
<!-- HEADER START -->
<div id="flexContainer">
<div id="bigImage">
<img src="http://getdrawings.com/colorings/marvel-deadpool-coloring-pages-10.jpg">
</div>
<ul class="flexUL">
<li class="vm_clickable" id="organic" data-src="http://getdrawings.com/colorings/marvel-deadpool-coloring-pages-10.jpg" data-url="/organic"> Organic </li>
<li class="vm_clickable" id="glutenFree" data-src="https://www.bemea.com/wp-content/uploads/2018/11/Hero_SPE-V3_960x660.jpg" data-url="/gluten-free-shopping"> Gluten-Free </li>
<li class="vm_clickable" id="sugarFree" data-src="https://cdn.wallpapersafari.com/25/1/0yt8rf.jpg" data-url="/productsearch.aspx?rid=1041.05"> Sugar-Free</li>
<li class="vm_clickable" id="vegan" data-src="https://1iu5gpsjoqnqr.wpcdn.shift8cdn.com/wp-content/uploads/2019/09/960x660-SoWalWIne-1.jpg" data-url="/vegan"> Vegan </li>
<li class="vm_clickable" id="keto" data-src="https://cdn.wallpapersafari.com/66/32/4YHl2n.jpg" data-url="/keto-diet-essentials"> Keto </li>
<li class="vm_clickable" id="paleo" data-src="https://static.zerochan.net/Frozen.(Disney).full.1819021.jpg" data-url="/paleo"> Paleo </li>
</ul>
</div>
</div> <!-- deal wrapper end -->
CSS
#flexContainer {
display: flex;
width:100%;
height:auto;
flex-wrap:nowrap;
}
#bigImage > img{
width: 100%;
}
.flexUL{
display: flex;
flex-direction: column;
flex-wrap:nowrap;
}
.flexUL > li {
height: 100px;
width:320px;
}
.flexUL > li > a{
color: white;
font-size: xx-large;
margin-left: 20px;
}
.flexUL > li:hover > a:after{
content: '\203A';
font: 300 36px/18px "Roboto Slab";
margin-left: .2em;
height: 24px;
vertical-align: middle;
display: inline-block;
color: white;
}
#organic{
background-color: #ccb3d1;
}
#organic:hover{
background-color: #B7A1BC;
}
#glutenFree{
background-color: #e7b020;
}
#glutenFree:hover{
background-color: #CF9D1C;
}
#sugarFree{
background-color: #f07f53;
}
#sugarFree:hover{
background-color: #D8724A;
}
#vegan{
background-color: #889a2c;
}
#vegan:hover{
background-color: #7A8A27;
}
#keto{
background-color: #f49382;
}
#keto:hover{
background-color: #DB8475;
}
#paleo{
background-color: #9e5860;
}
#paleo:hover{
background-color: #8E4F56;
}
/* MEDIA QUERIES */
https://codepen.io/gchis66/pen/gOPqoeX
Any help is appreciated. Something tells me im missing very obvious solutions