Images not displaying in Flex Container [duplicate]

Question

I am having difficulty calling two images into their containers via css. I've recreated the portion of the code of the site I'm building below.

The section itself spans 100% of the width. The image containers within the section are to take up 50% each of the 100% width, and flex to the left and right sides. But when I call the images nothing appears, and I'm not sure what part of my code is hampering, even the, displaying of the images. Below is my code:

main {
    height:100%;
    width: 100%;
    background-color: white;
}

.section {
    height: 100%;
    width: 100%;
}

.for-eduBusiness {
    height: 100%;
    width: 100%;
    min-height: 450px;
    border: 1px solid;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.image-container-left {
  height: 100%;
  width: 50%;
  border: 1px solid red;
	flex: 0 0 auto;
	background: #ccc 
url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
	
}

.image-container-right {
     height: 100%;
	flex: 0 0 auto;
  width: 50%;
  border: 1px solid red;
	background: #ccc url("https://www.moooi.com/sites/default/files/styles/large/public/product-images/random_detail.jpg?itok=ErJveZTY") no-repeat center center;
	background-size: cover;
}

<main>
	<div class="section for-eduBusiness">
		<div class="image-container-left"></div>
		<div class="image-container-left"></div>
	</div>
</main>

Answer 1

Everything you posted has a height of 100%. Something up the chain has to have an explicit height set for that to work.

Percentage Height HTML 5/CSS