Flex работает в Chrome, но не в IE

Question

html-структура кода показана ниже.Теперь я задал фон: красный на временной шкале className (чтобы проверить, уменьшается ли ребенок или уменьшается при уменьшении и увеличении размера окна).временная шкала является родительской для кластера, eventitem, today, todateate.

Когда я пытаюсь минимизировать и максимизировать путем изменения размера окна, в chrome он работает хорошо, но в IE он не работает.

IЯ не уверен, где я иду не так.Кажется, график не изгибается: 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

Вместо 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

Answer 2

Поддержка IE 11: flex

IE 10: только flexbox

Существует синтаксис для старых браузеров:

  .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+ */

 }