<!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的标签的高度就无法自适应了？该如何解决这个问题？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Modify the place in the picture below
Thanks, how can I say that the code in my project doesn't work, it turned out to be multiple semicolons. . . I’m so miserable looking for it