Question

我需要使用flex，cross browser来保留几个div的宽高比。 div包含图表和图表作为SVG，而不是IMG。

我有一个首选的解决方案在firefox（https://jsfiddle.net/2d5hcfbo/4/）中运行，另一个在IE中工作（https://jsfiddle.net/229oo3br/2/），但两种解决方案都不起作用。这些基于answer。在查看Jsfiddles时，如果增加输出窗口的宽度（通过向左拖动中间列边界），您将看到黄色div变为粉红色并添加了Filter列（@media查询）。 / p>

在这两种情况下，问题是div似乎默认为文本高度+填充。它们需要保持椭圆形，宽度是宽度的1.5倍。同样在IE中，div相互重叠，字体对齐低。

FF解决方案使用flex-basis: 30vw;根据宽度设置高度（flex-direction = column）。（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>

Answer 1

IE可能需要在媒体查询中重新声明默认的flex属性。添加回默认声明flex: 0 1 auto就可以了。

感谢Michael_B的指针。在此处修复：https://jsfiddle.net/2d5hcfbo/9/

Flex CSS：保持div纵横比跨浏览器

1 个答案: