我在将图片占用不超过父容器可用宽度的100％时遇到了一些麻烦。我只是注意到Firefox 36(不是IE或Chrome)中的问题。那是不是Firefox漏洞，还是我在这里遗漏了一些东西？
注意:图片不得大于原始大小。
Chrome :
Firefox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>最佳答案
如果要允许它缩小到其最小内容宽度(其min-width:0 -child的固有宽度)以下，则需要在.middleColumn上添加<img>。
否则，它将获得新的默认 min-width:auto ，它在flex项目上基本上会使它拒绝收缩到其收缩包装的大小以下。
(Chrome hasn't implemented min-width:auto还没有。我被告知IE在其下一代渲染引擎中具有这种功能，因此我希望该版本的行为像Firefox一样，一旦实现了此功能，Chrome也会如此。)
固定的代码段:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
min-width:0;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>