This code is not working in my browser

This code is not working in my browser
0

#1
<!DOCTYPE html>
<html>
	<head>
		<title>Flexbox</title>
		<meta charset="utf-8">

		<style>
			#box-container {
		    background: gray;
		    display: flex;
		    height: 100%;
		    flex-direction: row;
		  }
		  #box-1 {
		    background-color: dodgerblue;
		    width: 25%;
		    height: 50%;
		  }

		  #box-2 {
		    background-color: orangered;
		    width: 25%;
		    height: 50%;
		  }
		  #box-3 {
		    background-color: violet;
		    width: 25%;
		    height: 50%;
		  }
		  #box-4 {
		    background-color: yellow;
		    width: 25%;
		    height: 50%;
		  }
		  #box-5 {
		    background-color: green;
		    width: 25%;
		    height: 50%;
		  }
		  #box-6 {
		    background-color: black;
		    width: 25%;
		    height: 50%;
		  }
		</style>
	</head>
	<body>
		<div id="box-container"> 
			<div id="box-1"></div>
			<div id="box-2"></div>
			<div id="box-3"></div>
			<div id="box-4"></div>
			<div id="box-5"></div>
			<div id="box-6"></div>
		</div>
	</body>
</html>

its from https://learn.freecodecamp.org/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column


#2

What do you mean by not working? Can you describe what you expect to see and then tell us what happens instead?


#3

there is nothing on the screen. But I think its because of the “height: 100%” on the box-container selector, If I use percentage it does not work, but if I use px or other just work fine.

Do you know why?


#4

that what I was expecting


#5

There is a great article concerning setting elements’ heights to 100% which does a better job of explaining why than I could.