I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image.
However, I am facing an issue where the image does not appear. Even though I set the image height to 80%, the div's height appears as 0 when inspected in Chrome. It only works when I use pixel values instead of percentages.
My question is, how can I set the div height to a percentage and still have the image displayed?
html, body {
margin: 0;
height: 100%;
}
div {
align-items: center;
justify-content: center;
height: 100%;
display: flex;
overflow: auto;
background-color:aqua;
}
ul {
margin-top: auto;
margin-bottom: auto;
height: calc(70% + 0px);
padding: 0;
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
align-content: flex-start;
}
li {
flex-basis: calc(100% / 3 - 2px);
/* Subtract the border */
color: firebrick;
border: 1px solid firebrick;
background-color: greenYellow;
margin: 0px;
list-style-type: none;
box-sizing: border-box;
background-size: contain;
width: 200px;
}
.image {
background-image: url("http://i.imgur.com/nswXRR4.jpg");
background-size: contain;
background-position: 50%, 50%;
background-repeat: no-repeat;
margin: 5px;
height: 90%;
}<div>
<ul>
<li>
<div class="image"></div>
<div class="num">1</div>
</li>
<li>
<div class="image"></div>
<div class="num">2</div>
</li>
<li>
<div class="image"></div>
<div class="num">3</div>
</li>
<li>
<div class="image"></div>
<div class="num">4</div>
</li>
</ul>
</div>