Images not displaying in Flex Container

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>

Add this to your code: *html, body { height: 100%; }* – Michael Benjamin Sep 15 '17 at 18:34 — Michael Benjamin, Sep 15 '17 at 18:34

score 4 · Accepted Answer · answered Sep 15 '17 at 18:33

4

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

answered Sep 15 '17 at 18:33

Pytth

4,008
24
29

Thank you so much! You're my hero as of this moment! – Theodore Steiner Sep 15 '17 at 18:43
1

Oh buddy I know the feeling. Glad to help! – Pytth Sep 15 '17 at 18:57

Johannes · Answer 2 · 2017-09-15T18:42:11.850

Add height: 100%; to html, body to give all these elements a proper height reference, and remove the flex-wrap.

html, body {
  height: 100%;
}
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 blue;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.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 green;
 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-right"></div>
 </div>
</main>

BTW: And use image-container-right in your second DIV, not twice image-container-left...

Images not displaying in Flex Container

2 Answers2