柔性父項的子項增長爲100％寬度和高度不填充父項

Question

在下面的提琴中，我試圖通過使用.content div來填充父項（.side-child）的高度父母的100％寬度和高度。邊小孩的div有正確的高度，唯一的問題是讓內容填滿他們的父母（同時保持長寬比）。

https://jsfiddle.net/d6L2bve9/5/

<div id="side"> 
<div class="side-child"> 
    <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" /> 
</div> 
<div class="side-child"> 
     <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" /> 

</div> 
<div class="side-child"> 
     <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" /> 

</div> 
</div> 

CSS

#side { 
height : 100vh; 
display : flex; 
flex-direction : column; 
width : 50px; 
} 

.content { 
height : 100%; 
background : #ff0000; 
} 

.side-child { 
flex-grow : 1; 
}  

我可以得到它由.side獨生子女位置設置相和。內容絕對低於

https://jsfiddle.net/5sgfcjy4/2/

工作

但我不明白爲什麼我有t o因爲。side-child已經擁有了正確的身高？我猜測它的，因爲技術上的。孩子divs沒有身高值，因此100％不能使用？

Answer 1

您也可以通過下面的代碼實現這一點：

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.column { 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    float: left; 
 
} 
 
.column li { 
 
    background: deepskyblue; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    
 
    line-height: 50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<ul class="flex-container column"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
</ul>

Answer 2

這是否對你的工作？

#side { 
 
    height : 100vh; 
 
    display : flex; 
 
    flex-direction : column; 
 
    width : 50px; 
 
} 
 

 
.content { 
 
    flex: 1 auto; 
 
    background : #ff0000; 
 
} 
 

 
.side-child { 
 
    display: flex; 
 
    width : 100%; 
 
    height : 100%; 
 
}

<div id="side"> 
 
    <div class="side-child"> 
 
    <div class="content"> 
 
     1 
 
    </div> 
 
    </div> 
 
    <div class="side-child"> 
 
     <div class="content"> 
 
     2 
 
    </div> 
 
    </div> 
 
    <div class="side-child"> 
 
     <div class="content"> 
 
     3 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

如果你不需要側胎後內容的div你也可以編輯你的HTML這樣的：

#side { 
 
    height : 100vh; 
 
    display : flex; 
 
    flex-direction : column; 
 
    width : 50px; 
 
} 
 
.side-child { 
 
    flex-grow : 1; 
 
    background : #ff0000; 
 
    border:1px solid #000; 
 
}

<div id="side"> 
 
    <div class="side-child"> 
 
     1 
 
    </div> 
 
    <div class="side-child"> 
 
     2 
 
    </div> 
 
    <div class="side-child"> 
 
     3 
 
    </div> 
 
</div>

Answer 4

做的另一種方式。

#side { 
    height : 100vh; 
    display : flex; 
    flex-direction : column; 
    width : 50px; 
} 

.content { 
    width : 100%; 
    background : #ff0000; 
} 

.side-child { 
    flex-grow: 1; 
    display: flex; 
    align-self: stretch; 
} 

https://jsfiddle.net/d6L2bve9/2/

Answer 5

我剛剛結束了做它像這樣

#side { 
    height : 100vh; 
    display : flex; 
    flex-direction : column; 
    width : 50px; 
    } 

    .content { 
    height : 100%; 
    background : #ff0000; 
    position : absolute; 
    } 

    .side-child { 
    flex-grow : 1; 
    position : relative; 
    } 

https://jsfiddle.net/5sgfcjy4/2/