当媒体调整页面大小时，IE重叠的挠曲盒

Question

我使用柔性盒来显示各种项目，其中布局将根据屏幕大小变化，以便在设备上工作。在Chrome中，一切都按预期显示，但是IE从最大尺寸到中等大小屏幕是重叠的。我在小提琴里复制了这个。

小提琴：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;  }
}

我尝试了各种灵活的设置，如研究中推荐的，但没有运气。

如有任何反馈，将不胜感激。

Answer 1

经过广泛的尝试和错误之后，我终于解决了这个问题，这样IE的行为就像在Chrome中看到的一样。CSS需要稍加调整，并添加一个额外的子flex容器(flex-1)，并将flex重命名为flex-2。

冲突发生的原因是为#canvasmap和#Supplier量程设置了固定宽度。IE无法准确地确定挠性容器的尺寸。当专门为flex容器(flex-1 & flex-2)定义大小大小时，IE似乎可以按需要工作。

更改摘要：

有三个主要的flex块: flex-1、flex-2和flex-3.另有一个容器(flex-12)环绕在flex-1和flex-2周围.外挠性容器是flex-123。flex块(flex-12)被更新，以便每个子项都用自己的flex容器定义。

• 增加了Flex容器(flex-1)。
• Flex容器'flex‘被重命名为'flex-2’。
• 三个主要的flex块(flex-1、flex-2、flex-2_ )被定义为flex方向: row
• CSS：#canvasmap宽度从288 to更改为“inherit.‘”。在此过程中，flex-1的最小宽度设置为中间屏幕大小，“unset”设置为最小屏幕大小。
• flex容器flex-12宽度在最大屏幕上被设置为“auto”。
• 在最大屏幕尺寸上，flex容器flex-3宽度设置为100%。
• 最大屏幕尺寸的中间挠曲块( flex -2)的最小宽度为168 is，对于中等大小的屏幕来说是“unset”。

小提琴解析：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; }
}