<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{border: 1px solid black;width: 300px;height: 300px;margin: 50px auto;border-radius: 5px;
display: flex;flex-wrap: wrap;
}
/* i{display: block;width: 30%;height: 30%;background: black;border-radius: 50%;} */
.box1,.box2,.box3{width: 100%;}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<i></i>
<i></i>
</div>
<div class="box2">
<i></i>
</div>
<div class="box3">
<i></i>
<i></i>
</div>
</div>
</body>
</html>
问题一：
在这个代码里面，当我不给box设置display: flex;的时候，这个时候我要给box1，2，3用百分比设置宽高的时候必须宽高都要设置div才能显示出来，而当我给box设置display: flex;的时候，这个时候为什么只用设置width=100%高度自己就出来了？并且height是100%？而width自动就变成了原来的三分之一？
问题二：
当我给box设置display: flex;并且flex-wrap: wrap;height在之前没有设置的情况下自动变成了原来的三分之一？
