2

I am using the flexbox for displaying a variety of items where the layout will change based on the screen size in order to function on devices. In Chrome, everything displays as expected, however IE is overlapping when going from the largest size to medium size screen. I've managed to replicate this in jsfiddle.

Fiddle: https://jsfiddle.net/c7xmfyd3/5/

span { display: inline-flex; }
.max-width { width: 100%; }

#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }

.box { border: 0.75pt solid #aaaaaa; margin: 0pt 5pt 11pt 0pt; flex:auto; }
.box { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; box-shadow: 0pt 2.2pt 4pt #aaaaaa; }
    .box .content { padding: 0pt 4pt 0pt 4pt; }
    .box .title { background: #0094ff; color: white; padding: 4pt; font-variant: small-caps; -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; }
    .box p { color: #333; padding: 7.2pt; }

.metricbox { border: 0.75pt solid; width: 72pt; height: 49pt; margin: 2pt; display: inline-block; position: relative; }
.metricbox { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; -moz-border-radius-bottomright: 4pt; -moz-border-radius-bottomleft: 4pt; -webkit-border-bottom-right-radius: 4pt; -webkit-border-bottom-left-radius: 4pt; border-bottom-left-radius: 4pt; border-bottom-right-radius: 4pt; }
    .metricbox .content { text-align: center; font-weight: bold; font-size: 15pt; padding: 3pt; }
    .metricbox .item { font-size: 8pt; color: black; font-weight: bold; text-transform: uppercase; width: 100%; text-align: center; position: absolute; bottom: 0; }

.mb-base { border-color: black; color: black; }
.mb-good { border-color: #339933; color: #339933; }
.mb-bad { border-color: #ff0000; color: #ff0000; }
.mb-test { border-color: #e18412; color: #e18412; }

/*Used to modify display as screen sizes change*/
.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }
.flex-3 { align-content:flex-start; }
.flex-stack { flex-direction: column; }

/*Media widths originally:  450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */
@media screen and (min-width: 72pt) {
    #canvasMap { width: inherit; }
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: column; }
    .flex-3 { flex-direction: column; }
}

/*@media screen and (min-width: 758px) {*/
@media screen and (min-width: 432pt) {
    #canvasMap { width: 288pt; }
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: row; }
    .flex-3 { flex-direction: row; }
}

@media screen and (min-width: 710pt) {
    #suppliermetrics { min-width: 168pt; }
    .flex-123 { flex-direction: row; }
    .flex-12 { flex-direction: row; }
    .flex-3 { flex-direction: row;  }
}

I've attempted a variety of flex settings as recommended in research, but no luck.

Any feedback is appreciated.

freginold
  • 3,946
  • 3
  • 13
  • 28
Galactic
  • 400
  • 4
  • 14
  • 1
    As no one wants to parse through all that code, I suggest you reduce it to a _minimum_ working code snippet that reproduce the issue. When done you will most like attract more experienced users and get a proper answer – Asons Aug 18 '17 at 14:57
  • What was provided is a minimum snippet. The CSS for the Framework.css is the only thing that can be pulled out, but that alters some of the cosmetics without directly affecting the overlap. It was added to eliminate what might be perceived as the issue. – Galactic Aug 18 '17 at 15:05
  • 2
    The standard fix for overlapping flex items in IE is [**this**](https://stackoverflow.com/q/35111090/3597276). However, it didn't work when I tried it in your demo. Considering that your code is relatively complex (for questions on this site) and that you're most familiar with it, you may find a way to make it work. – Michael Benjamin Aug 18 '17 at 15:16
  • Michael..thanks. I've tried that previously also and continue to try and resolve the issue. – Galactic Aug 18 '17 at 15:22

1 Answers1

0

After extensive trial and error, I've finally resolved the issue so that IE behaves as desired and as seen in Chrome. The CSS needed minor tweaking along with an additional child flex container (flex-1) added and renaming flex to flex-2.

The conflict occurred because of fixed widths being set for #canvasmap and #suppliermetrics. IE was not able to accurately determine sizing for the flex containers. When the sizing is defined specifically to the flex containers (flex-1 & flex-2), IE seems to work as desired.

Summary of changes:

There are three main flex blocks: flex-1, flex-2, and flex-3. An additional container exists (flex-12) that wraps around flex-1 and flex-2. The outer flex container is flex-123. The flex block (flex-12) was updated so that each child item was defined with its own flex container.

  • Flex container (flex-1) was added.
  • Flex container 'flex' was renamed to 'flex-2'.
  • Three main flex blocks (flex-1, flex-2, flex-2_ were defined with flex-direction: row
  • CSS: #canvasmap width changed from 288pt to 'inherit.' In doing so, the min-width for flex-1 was set for the middle screen size and 'unset' for the smallest screen size.
  • The flex container flex-12 width was set to 'auto' on the largest screen size
  • The flex container flex-3 width was set to 100% on the largest screen size
  • The middle flex block (flex-2) has min-width of 168pt for the largest screen size and is 'unset' for the middle size screen

Fiddle resolution: https://jsfiddle.net/c7xmfyd3/6/

/*#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }*/
#canvasMap { height: 288pt; width: inherit; margin: 0pt; padding: 0pt; } 

/*Used to modify display as screen sizes change*/
/*.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }*/
/*.flex-3 { align-content:flex-start; }*/
.flex-123,  .flex-12, .flex-2, .flex-3, .flex-stack { display: flex; align-items: stretch; }
.flex-1, .flex-2, .flex-3 { flex-direction: row; }
.flex-stack { flex-direction: column; }


/*Media widths originally:  450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */
@media screen and (min-width: 72pt) {
    /*#canvasMap { width: inherit; }*/
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: column; }
    .flex-3 { flex-direction: column; }
    .flex-1 { min-width: unset; }
}


@media screen and (min-width: 432pt) {
   /*#canvasMap { width: 288pt; }*/
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: row; }
    .flex-1 { min-width: 288pt; }
    .flex-2 { min-width: unset; }
    /*.flex-3 { flex-direction: row; }*/
}

@media screen and (min-width: 710pt) {
    /**#suppliermetrics { min-width: 168pt; }*/ 
    .flex-123 { flex-direction: row; }
    .flex-12 { flex-direction: row; }
    /*.flex-3 { flex-direction: row;  }*/
    .flex-12 { width: auto; }
    .flex-3 { width: 100%; }
    .flex-2 { min-width: 168pt; }
}
Galactic
  • 400
  • 4
  • 14