0

I need to preserve the aspect ratio of several divs using flex, cross browser. The divs contain charts and diagrams as SVGs, not IMGs.

I have a preferred solution working in firefox (https://jsfiddle.net/2d5hcfbo/4/), and another working in IE (https://jsfiddle.net/229oo3br/2/), but neither solution works in both. These were based on this answer. When looking at the Jsfiddles, if you increase the width of the output window (by dragging the middle column boundary to the left) you'll see the yellow divs turn pink and a Filter column is added (@media queries).

In both cases, the problem is that the divs seem to default to text height + padding. They need to stay oblong, broadly 1.5 times as wide as high. Also in IE the divs overlap each other and the font aligns low.

The FF solution uses flex-basis: 30vw; to set the height based on the width (flex-direction = column). (Height: 30vw doesn't work, not sure why.) This works in Chrome too.

The IE solution uses padding-top: 16.67%; to affect the height. This method has never been intuitive to me but I'd use it if it worked in FF.

I'm using IE 11 and FF45.9. I understand IE11 has/had a bug in this area(https://github.com/philipwalton/flexbugs/issues/71) but I can't avoid the browser. Thanks for any help!

Edit: I can make both declarations. But is there a better way?

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
emma
  • 343
  • 3
  • 16

1 Answers1

0

Perhaps IE requires re-declaration of the default flex property within media queries. Adding back default declaration flex: 0 1 auto did the trick.

Thanks to Michael_B for the pointer. Fix here: https://jsfiddle.net/2d5hcfbo/9/

emma
  • 343
  • 3
  • 16