I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrollable flexbox. How can this be achieved? The current code I have is:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
#left {
flex: 1;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
@media (max-width:800px) {
body {
flex-direction: column;
}
}<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="UTF-8>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>