Flex box would not show with <!DOCTYPE html>

HTML-CSS
1

I wanted to make a flexbox and realized that it does not work with !DOCTYPE html. When I removed !DOCTYPE html the flexbox shows. Does anyone know why?

<!DOCTYPE html>
<html>
<style>
#boxcontainer{
 background: gray;
 display: flex;
 height: 100%;
}

 #box1{
  background-color: dodgerblue;
  width: 25%;
  height: 50%;
 }
 
  #box2{
  background-color: orangered;
  width: 25%;
  height: 50%;
 }
 
 #box3{
  background-color: violet;
  width: 25%;
  height: 50%;
 }
   
 #box4{
  background-color: yellow;
  width: 25%;
  height: 50%;
 }
 
 #box5{
  background-color: green;
  width: 25%;
  height: 50%;
 }
</style>

 <div id="boxcontainer">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
  <div id="box5"></div>
 </div>

</html>
2

<!doctype html>Declares that the page follows the HTML5 specification,You can change the height of the boxcontainer tag to a specific value,The page will show the content.

3

I believe you need to set html and body height inside your <style> tag. For example:

html, body {
height: 100vh;
}

4

I see, thank you so much!

5

Yes, it worked when I set the container height to a specific size. Thanks a lot!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.