html - Flex 在 chrome 中工作，但在 IE 中不工作

Question

代码的html结构如下图所示。现在我将 background:red 赋予时间线类名（以检查在最小化和最大化窗口大小时孩子是否缩小或增长）。时间线是集群、事件项、今天、今天的父项。

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

我不确定我哪里出错了。似乎时间线不是灵活增长：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;
}

标签： htmlcssflexboxinternet-explorer-11

Answer 1

而不是在时间线上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 中输出