Flex 在 chrome 中有效，但在 IE 中无效

Question

html代码结构如下图。现在我已经将 background:red 指定给时间轴类名（以检查 child 在最小化和最大化 window 大小时是否缩小或增大）。时间线是 parent 集群、事件项、今天、到日期。

当我尝试通过重新缩放 window 大小来最小化和最大化时，在 chrome 中它运行良好，但在 IE 中它被破坏了。

我不确定我哪里出错了。似乎时间轴不是 flex grow:1。

代码结构

<div class="data">
    <div class="dataselect__main "> 
        <div class="dataselect__content" >
        <div class="logic_scrollbararea">
            <div class="timeline">
                ::before
                <div class="data__moredata--buttoncontainer">
                    <div class="data__moredata--button">
                    </div>
                </div>
                <div class="timeline__item__cluster" ></div>
                <div class="timeline__item__eventItem" ></div>
                <div class="timeline__item__todayItem "></div>
                <div class="timeline__item__todaydateItem "></div>
                <div class="timeline__nodataavailable" ></div>
                ::after
            </div>
        </div>
    </div>
</div>

css

.dataselect__main{
    height: 100%;
    overflow: hidden;
    display:flex;
    flex:1;
}
.dataselect__content{
    overflow: hidden;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    display:flex;
    flex:1;
    min-height:0;
    min-width:0;
}
.logic_scrollbararea{
    display: inherit;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
}
.timeline {
    height: 100%;
    padding-top: 3.125rem;
    position: absolute;
    min-width: 100%;
    background:red;
 }
.timeline:before {
    content: "";
    height: 0.375rem;
    border-radius: 0.3125rem;
    border: 0.125rem solid #1f1f1f;
    background-color: #2d6483;
    display: block;
    top: 3.125rem;
    left: 0;
    right: 0.25rem;
    margin-top: 0.4375rem;
}
.timeline:after {
    content: "";
    border-radius: 0.5rem;
    border: 0.125rem solid #1f1f1f;
    background: #389dd5;
    top: 3.125rem;
    right: 0;
    margin-top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
}

Answer 1

IE 11 支持：flex

IE 10：仅弹性框

旧浏览器的语法：

  .page-wrap {
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

 }

Answer 2

而不是 min-width: 100% 在时间轴上使用 width:100%。所以你的时间线代码将是：

.logic_scrollbararea {
    width: 100%;
}

.timeline {
    height: 100%;
    padding-top: 3.125rem;
    position: absolute;
    background: red;
    width: 100%;
}

Flex 支持 IE 11，因此在 IE 中输出

Flex 在 chrome 中有效，但在 IE 中无效

Flex works in chrome but not in IE

html

css

flexbox

internet-explorer-11