我有一个包含两个div的flexbox，它将屏幕划分为equals。当屏幕小于800px时，我希望flexbox方向从一行变为另一列，每个div都有屏幕大小，使flexbox div可滚动，怎么做？我的实际代码是：
* {
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>只需使身高自动并添加此CSS（使每个div全屏高度）：
#left,#right {
height:100vh;
}
* {
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;
height:auto;
}
#left,#right {
height:100vh;
}
}<body>
<div id="left">
</div>
<div id="right">
</div>
</body>或者使身体的高度等于2x100vh = 200vh，这样每个div将占用一半（100vh），因为你在两者上都设置了flex:1：
* {
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;
height:200vh;
}
}<body>
<div id="left">
</div>
<div id="right">
</div>
</body>或者使身体的高度等于2x100％，在你的情况下也是2x100vh：
* {
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;
height:200%;
}
}<body>
<div id="left">
</div>
<div id="right">
</div>
</body>