Hello everyone!
So, while I’m doing the lessons on freeCodeCamp, I’m also doing in a local html file the thing I’ve learned and changing some stuff to see if I really learned it.
In the flex-wrap lesson, all items sizes are in % and it appear in the screen as a percentage of it. However, when doing this in my machine, it just won’t appear. To make the boxes appear, I have to set the first box container with a fixed value, not as a percentage.
So, I would like to know if I’m missing something or is just that the lesson has a hidden div with a different size without it being %.
Could you help me, guys?
**Your code so far**
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>Flex test</title>
</head>
<style>
#container-a {
height: 100%; /*Here is where I have to set to some fixed value in order to work */
display: flex;
background-color: gray;
}
#box-a-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-a-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-a-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-a-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-a-5 {
background-color: green;
width: 25%;
height: 50%;
}
</style>
<div id="container-a">
<div id="box-a-1" class="box-child-a"></div>
<div id="box-a-2" class="box-child-a"></div>
<div id="box-a-3" class="box-child-a"></div>
<div id="box-a-4" class="box-child-a"></div>
<div id="box-a-5" class="box-child-a"></div>
</div>
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15
Challenge: Use the flex-wrap Property to Wrap a Row or Column
Link to the challenge:
