块1包含三列.中间列中有两行,每行设置为flex：1.
块2包含三列.中间列中有两行,每行设置为flex：1.第二行包含狗的图像.图像不会缩小到包含它的行的高度.
块3仅包含中间列,其中包含两行,每列设置为flex：1.第二行包含狗的图像.图像会缩小到包含它的行的高度.
问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？我可以添加什么CSS规则来实现这一目标？
.block{
height:100px;
}
.wrapper{
border:5px solid purple;
display:flex;
flex-direction:row;
}
.column{
flex:1;
border:3px solid yellow;
}
.middle{
display:flex;
flex-direction:column;
}
.first{
background:red;
}
.second{
background:orange;
}
.third{
background:purple;
}
.row{
flex:1;
border:1px solid black;
display:flex;
align-items:stretch;
}
img{
flex:1;
}
<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
<div class="row first"></div>
<div class="row second"></div>
</div>
<div class="right column"></div>
</div>
<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
<div class="row first"></div>
<div class="row second">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
</div>
</div>
<div class="right column"></div>
</div>
<div class="middle block">
<div class="row first"></div>
<div class="row second">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Dog.svg" />
</div>
</div>
解决方法
更换：
.row {
flex: 1;
border: 1px solid black;
display: flex;
align-items: stretch;
}
有：
.row {
flex: 1 1 0px; /* adjustment on this line */
border: 1px solid black; /* no change */
display: flex; /* no change */
align-items: stretch; /* no change */
}
说明
你写了：
The question is why does the image in the second row of the middle
column of block 2 not shrink to the height of the row within which it
is contained?
您似乎只在Chrome中测试了代码,因为在涉及Firefox和IE11时,您的问题的前提是错误的.
在那些浏览器中,块2中的狗的图像很好地包含在flex项中. IE中的图像有点拉长,但它仍然包含在内.
您的问题似乎是特定于Chrome的. (我没有在Safari中测试,但这是像Chrome这样的WebKit浏览器,因此解决方案可能类似.)
以下是您希望跨浏览器进行测试的原始代码演示：
这个问题的解决方案很有意思,因为属性值的一个小的,看似微不足道的差异在Chrome渲染中产生了很大的不同.
您的图像是div.row的子元素(更具体地说：flex项),是具有行方向的Flex容器.
div.row也是一个较大容器的flex项(在列方向上),并且应用了flex：1. Chrome中的问题源于flex：1声明.
flex：1是什么意思？
flex属性是flex-grow,flex-shrink和flex-basis的简写.
flex: 1相当于flex-grow：1,flex-shrink：1和flex-basis：0％.
注意在0之后的百分号(％).它在flexBox规范的Common Values of flex中定义,它实际上有所不同.
在Chrome中试试这个：
替换flex：1在div.row中使用其等效的flex：1 1 0％.您会注意到渲染时没有任何变化.
现在删除百分号并再次运行.图像卡入到位.
使其弯曲：1 1 0px,如CSS-Tricks所述,也可以.
所以,在0上使用px或没有单位 – 而不是百分比 – 修复了Chrome中的问题……并且它不会破坏Firefox中的任何内容.
然而,在IE11中,px可以工作,但无单元则不行.实际上,无单位会消除布局.
但IE11是另一个故事……
在浏览器支持数据网站caniuse.com上,IE11显示出对flexBox的全面支持,直到最近,由于“存在大量错误”,它被降级为部分支持.在测试上述演示时,IE11会定期在刷新时以不同的方式呈现相同的代码.有关问题列表,请参阅caniuse.com上的Known Issues选项卡.
请注意,所有主流浏览器except IE 8 & 9都支持flexBox.一些最新的浏览器版本,例如Safari 8和IE10,需要vendor prefixes.如上所述,IE11由于几个已知的错误而提供部分支持.要快速添加所需的所有前缀,请使用Autoprefixer. this answer中的更多浏览器兼容性详细信息.
