>我需要使用flex的跨浏览器保留几个div的纵横比。div 包含作为 SVG 的图表和图表，而不是 IMG。
我有一个在 Firefox (https://jsfiddle.net/2d5hcfbo/4/( 中工作的首选解决方案，另一个在 IE (https://jsfiddle.net/229oo3br/2/( 中工作，但这两种解决方案都不适用于两者。这些都是基于这个答案。查看 Jsfiddles 时，如果增加输出窗口的宽度(通过将中间列边界向左拖动(，您将看到黄色div 变为粉红色，并添加了筛选器列(@media查询(。
在这两种情况下，问题在于div 似乎默认为文本高度 + 填充。它们需要保持长方形，宽度大约是高度的1.5倍。同样在IE中，div相互重叠，字体对齐得很低。
FF 解决方案使用flex-basis: 30vw;根据宽度(挠曲方向 = 列(设置高度。(Height: 30vw不起作用，不知道为什么。这也适用于Chrome。
IE 解决方案使用padding-top: 16.67%;来影响高度。这种方法对我来说从来都不直观，但如果它在 FF 中有效，我会使用它。
我使用的是IE 11和FF45.9。我知道IE11在这方面有一个错误(https://github.com/philipwalton/flexbugs/issues/71(，但我无法避免浏览器。感谢您的任何帮助！
编辑：我可以同时声明。但是有更好的方法吗？
.CSS：
div#container {
/*position: relative;*/
padding-top: 50px;
display: flex;
/*flex-direction: row wrap;*/
/*align-items: stretch;*/
}
div#column1 {
flex: 0 0 auto;
background-color: white;
box-shadow: 3px 0px 10px #bebebe;
z-index: 9999;
overflow-y: scroll;
}
div#column2 {
display: flex;
flex-direction: column;
}
.row { display: flex; }
.row--top { flex: 2;}
.row--bottom { flex: 1; }
.cell {
flex: 1;
padding: 0.5em;
background-color: white;
margin: 1em;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}
.cell-wrap {
flex-basis: 31%;
display: flex;
flex-direction: column;
}
.cell-wrap div {
margin-left:0;
}
div.row--top div#cell1,
div.row--top div.cell-wrap div {
margin-bottom: 0;
}
div.fullwidth { width: 100%; }
div.fullheight { height: 100%; }
@media screen and (max-width: 1100px) {
#container {
height: auto;
}
.row { flex-direction: column; }
.cell {
flex-grow: 1;
background-color: pink;
/* flex-basis: 30vw; */
padding-top: 16.67%;
}
/*.flex.padding div {
padding-top: 16.67%;
}*/
#cell4 {
margin-bottom: 0;
}
.cell-wrap {
width: 100%;
flex-direction: column;
}
.cell-wrap div {
margin-left:1em;
}
}
@media screen and (max-width: 700px) {
.cell {
/*flex-grow: 0;*/
background-color: yellow;
padding-top: 16.67%;
/* flex-basis: 50vw; */
}
div#column1 {
display: none;
}
}
.HTML：
<div id="container" class="fullheight fullwidth">
<div class="fullheight" id="column1">
<div id="filterRow">
<div class="selectHolder" id="filters"><h1>Filter</h1><div class="spanHolder">
</div></div>
</div>
</div>
<div class="fullheight fullwidth" id="column2">
<div class="row row--top">
<div class="cell" id="cell1">cell one</div>
<div class="cell-wrap">
<div class="cell" id="cell2">cell two</div>
<div class="cell" id="cell3">cell three</div>
</div>
</div>
<div class="row row--bottom">
<div class="cell" id="cell4">cell four</div>
<div class="cell-wrap">
<div class="cell" id="cell5">cell five</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
也许 IE 需要在媒体查询中重新声明默认的 flex 属性。添加回默认声明flex: 0 1 auto就可以了。
感谢Michael_B的指点。在此处修复：https://jsfiddle.net/2d5hcfbo/9/