如何使flexbox子代的父母高度为100%?

本文翻译自:How to make flexbox children 100% height of their parent?

I'm trying to fill the vertical space of a flex item inside a flexbox. 我正在尝试在flexbox内填充flex项目的垂直空间。

 .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } 
 <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> 

And here's the JSFiddle 这是JSFiddle

flex-2-child doesn't fill the required height except in the two cases where: 除了以下两种情况外, flex-2-child不会填充所需的高度:

  1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome) flex-2的高度为100%(这很奇怪,因为flex项默认情况下为100%+在Chrome中有问题)
  2. flex-2-child has a position absolute which is also inconvenient flex-2-child具有绝对位置,这也不方便

This doesn't work in Chrome or Firefox currently. 目前,该功能不适用于Chrome或Firefox。


#1楼

参考:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值