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的标签的高度就无法自适应了?该如何解决这个问题?
问题解答
回答1:修改一下入下图的地方

谢谢,我怎么说我项目中的代码不起作用,原来是多个分号。。。找的我好惨
相关文章:
1. android - 京东移动端网页和其app加载的url所做的呈现不应该是完全一样的吗?2. android - 如何缩小APK的体积3. javascript - 在vue-cli引入vux后 使用报错4. python - 在sqlalchemy中获取刚插入的数据id?5. javamail发送邮件是否跟所在的网络环境有关?6. 关docker hub上有些镜像的tag被标记““This image has vulnerabilities””7. 站点内容复制额外增加的版权申明,真的很反人类。试问产品自己在用这个站点吗?8. css3 - 这个效果用 CSS 可以实现吗?border-image9. javascript - 奇怪的Symbol的问题10. vue.js - vue 打包后 nginx 服务端API请求跨域问题无法解决。

网公网安备