Гибкий дочерний элемент IE11 не сжимается, чтобы освободить место другому дочернему элементу с содержимым без переноса - PullRequest
Новая
       84

Гибкий дочерний элемент IE11 не сжимается, чтобы освободить место другому дочернему элементу с содержимым без переноса

0 голосов
/ 30 октября 2019

IE11 не сжимает гибкого дочернего элемента, когда другой дочерний элемент слишком мал, чтобы вместить его содержимое (без переноса).

Я прошел через пресловутые ошибки гибкого IE (https://github.com/philipwalton/flexbugs)) и попыталсявсе решения.

Скрипка

https://jsfiddle.net/adriaanmeuris/ef8Lz7ck/73/

.container {
  display: flex;
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  overflow: hidden;
  border: 1px solid red;
}

.center {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  border: 1px solid green;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  border: 1px solid blue;
}
<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

Ожидаемое поведение (Chrome, FF, Safari, Edge):

expected behaviour

поведение IE11:

IE11 behaviour

1 Ответ

0 голосов
/ 30 октября 2019

flex-basis установлен на 0, удалите его или установите на auto, в противном случае он следует правилу, в котором элемент может быть 0 из width '* basis. 

.container {
  display: flex;
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  overflow: hidden;
  border: 1px solid red;
}

.center {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  border: 1px solid green;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
  border: 1px solid blue;
}
<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

... Но потеря позиции второго элемента от центра ...

else, единственный обходной путь iможет думать о , равном display:table; (возможная альтернатива -> max-content не поддерживается в IE11) и calc() для max-width, поэтому он не может сжаться ниже размера контента, но нуждается в сбросе на сегодняшний деньбраузер, initial может помочь избежать ошибок в работе обычных браузеров: 

.container {
  display: flex;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.3) 50%);
  margin-bottom:0.5em;
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  overflow: hidden;
  border: 1px solid red;
}

.center {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  border: 1px solid green;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  border: 1px solid blue;
  /* i work around */
  width: 100%;
  max-width: calc(50vw - 100px);
  display: table;  /* IE11 :  cause max-content is not supported and flex is average */
  /* filter not IE 11 to reset default */
  display: initial;
  width: initial;
  max-width: initial;
}
<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/>right<br/>right<br/>right<br/>right<br/>right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

третий элемент не заполняет всю ширину строки макетом таблицы, а будет растягивать ее высоту.

@supports здесь также можно использовать другой способ фильтрации IE11 ... (условные комментарии, которые ранее были удалены несколькими версиями)

...