css - 前端flex布局嵌套内层的布局不起作用？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box{ width: 200px; display: flex; height: 200px; background: skyblue; flex-direction: column;}
.first{ height:30px; width: 200px; background: red;}
.second{ flex-grow: 1; background: pink; style:flex;}
.third{width:100%; height: 30px; background: yellow;}
.fourth{ width: 100%; flex-grow: 1; background: gray }
</style>
</head>
<body>
<p class="box">
<p class="first"></p>
<p class="second">
<p class="third">
</p>
<p class="fourth">
</p>
</p>
</p>
</body>
</html>
这样做class为fourth的标签的高度就无法自适应了？该如何解决这个问题？
