如何讓flexbox兒童100％的父母身高？我正在嘗試填充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>這是JSFiddleflex-2-child 沒有填寫所需的高度，除非在以下兩種情況下：flex-2 高度為100％（這很奇怪，因為彈性項目默認為100％+ Chrome中存在錯誤）flex-2-child 有一個絕對的位置也很不方便這在目前的Chrome或Firefox中不起作用。
3 回答
呼喚遠方
TA貢獻1856條經驗 獲得超11個贊
我知道你已經說過position: absolute;不方便但是有效。有關修復調整大小問題的詳細信息，請參閱下文。
另請參閱這個jsFiddle進行演示，雖然我只在Chrome中添加了webkit前綴。
你基本上有2個問題，我將分別處理。
讓靈活項目的孩子填充高度100％
設置
position: relative;在孩子的父母身上。坐落
position: absolute;于孩子。然后，您可以根據需要設置寬度/高度（我的樣本中為100％）。
在Chrome中修復調整大小滾動“quirk”
穿上
overflow-y: auto;可滾動的div。可滾動div必須具有指定的顯式高度。我的樣本已經有100％的高度，但如果沒有應用，你可以指定
height: 0;
MM們
使用
TA貢獻1886條經驗 獲得超2個贊
使用 align-items: 'stretch'
類似于David Storey的回答，我的工作是
.flex-2 {
display: flex;
align-items: 'stretch';}或者align-items，你可以align-self只使用.flex-2-child你想拉伸的項目。
- 3 回答
- 0 關注
- 709 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消