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. html - 哪些情况下float会失效?2. javascript - 在静态页面上用load 引入的页面文件问题?3. javascript - vue组件通过eventBus通信时,报错a.$on is not a function4. css - 移动端 line-height安卓错位,苹果机正常用,缩放解决了,可是又出来了占位的问题5. java后台导出页面到pdf6. css - 如何使用 vue transition 实现 ios 按钮一样的平滑切换效果7. javascript - webpack打包后的bundlejs文件代码不知道什么意思.8. css - 关于ul的布局9. 代理 - 一个nginx需求,访问web服务时,若用户为测试用户则转发到web服务的测试版本10. css3 - css如何实现素描描边效果
