search

Home  >  Q&A  >  body text

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的标签的高度就无法自适应了？该如何解决这个问题？
高洛峰高洛峰2781 days ago884

reply all(2)I'll reply

  • 怪我咯

    怪我咯2017-04-17 14:55:27

    Modify the place in the picture below

    reply
    0
  • 阿神

    阿神2017-04-17 14:55:27

    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

    reply
    0
  • Cancelreply