当我使用 flexbox 添加更多图像时，图像会被压扁

Question

我正在使用 amchart 并且我想在一页中显示多个图表（作为列），我的问题是无论我添加多少图表我都不想要滚动条（是的我希望它们被压扁) 当我只显示一个图表时，我希望它是正常大小（不被压扁或变小）

我怎样才能做到这一点？我现在正在尝试使用图像，如果它有效，我会在我的图表上进行。

html:

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
        <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
        <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
    </div>
</div>

css:

body{    overflow-y : hidden;}
.content {
    background-color: yellow;    

}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical;
    box-orient: vertical;
    flex-direction: column;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;
}
img {max-height:100%;}

在 jsfiddle 上：http://jsfiddle.net/89dtxt6s/356/

谢谢！

Answer 1

第 1 步：将以下内容添加到 .row 以确保它填充视口高度：

.row {
  height: 100vh;
}

第 2 步：您需要给每个 .cell 一个 flex 显示。此外，您需要将 flex-basis（shorthand 的第三个参数）调整为 100%。最后，您需要将 min-height 设置为零，以便每个元素在需要时完全缩小。

.cell {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%; /* no longer auto */
  min-height: 0;
}

步骤 3：将图像的宽度和高度添加到百分之一。

img {
  width: 100%;
  height: 100%;
}

结果：图像松软。丑陋的？当然。但我不是在评判。

https://jsfiddle.net/jaunkv7k/

当我使用 flexbox 添加更多图像时，图像会被压扁

images that squishes when I add more using flexbox

html

css

amcharts

flexbox