html - 媒体调整页面大小时 IE 重叠 flexbox

Question

我正在使用 flexbox 来显示各种元素，为了在设备上运行，布局会根据屏幕尺寸发生变化。在 Chrome 中，一切都按预期显示，但是 IE 在从最大尺寸到中等尺寸屏幕时会重叠。我已经设法在 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;  }
}

我尝试了研究中推荐的各种 flex 设置，但没有成功。

欢迎任何反馈。

Answer 1

经过大量试验和错误后，我终于解决了这个问题，因此 IE 的行为与在 Chrome 中看到的一样。 CSS 需要进行细微调整，同时添加一个额外的子 flex 容器 (flex-1)，并将 flex 重命名为 flex-2。

冲突的发生是因为为#canvasmap 和#suppliermetrics 设置了固定宽度。 IE 无法准确确定 flex 容器的大小。当大小是专门为 flex 容器(flex-1 和 flex-2)定义的时，IE 似乎可以按预期工作。

---

变更摘要:

主要有三个 flex block :flex-1、flex-2 和 flex-3。 存在一个附加容器 (flex-12)，它环绕 flex-1 和 flex-2。 外部 flex 容器是 flex-123。 flex block (flex-12) 已更新，因此每个子元素都定义了自己的 flex 容器。

• 添加了 flex 容器 (flex-1)。
• Flex 容器“flex”已重命名为“flex-2”。
• 三个主要的 flex block (flex-1、flex-2、flex-2_ 定义为 flex-direction: row
• CSS:#canvasmap 宽度从 288pt 更改为“继承”。这样做时，flex-1 的最小宽度设置为中间屏幕尺寸，“未设置”为最小屏幕尺寸。
• flex 容器 flex-12 宽度在最大屏幕尺寸上设置为“自动”
• flex 容器 flex-3 宽度在最大屏幕尺寸上设置为 100%
• 中间的 flex block (flex-2) 对于最大屏幕尺寸的最小宽度为 168pt，并且对于中间尺寸屏幕是“未设置”

---

fiddle 分辨率: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; }
}