柔性父项的子项增长为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/