Trying the same coding in my laptop, but it won't work

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:

Hello @pinheirogui,

Know that soon as you use percentage with high, you can meet some troubles. I advice you to use the unit vh (viewport height) which works fine on my side. If you use the value 100vh, it will corresponds the height of the viewport of the user, so on your laptop size and your computer size :wink:

1 Like

Using percentages with height is a bit trickier than doing it with widths.
Percentage sizing is always based on the parent. In other words, if you had two side-by side divs that were 50% wide and inside each of them you had divs that were 50% wide, then those children would be 25% of the total screen width. The default width of block-level elements is the full available width. The default height of a block-level element is the height of its content - basically the minimum height necessary.

You can get some pretty detailed explanations of ways to accomplish 100% height by googling around, but here is a quick and simple guide.

2 Likes

Thanks mate, I thought about using vh, but was not sure why it would not work with %

1 Like

Thanks @ArielLeslie, I will google it around and check the quick guide!