Как сделать работу с гибким концом в IE11

Я попытался сделать работу justify-content: flex-end; для переполнения скрытого содержимого DIV в IE11 без успеха.

После нескольких комбинаций я создал минимальный фрагмент кода, который работает в Chrome, но не в IE11:

.token-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  box-shadow: 1px 1px 2px 1px silver inset;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  //align-content: flex-end;
}
.token {
  display: inline-block;
  border: 1px solid silver;
  margin: 1px 3px 0 0;
  border-radius: 4px;
  height: 19px;
  padding: 0 3px;
}

<div class="token-container">
  <div class="token">
    <span class="token-text">t-bone</span>
  </div>
  <div class="token"><span class="token-text">hamburger</span></div>
  <div class="token"><span class="token-text">pancetta</span></div>
  <div class="token"><span class="token-text">leberkäs</span></div>
  <div class="token"><span class="token-text">bacon</span></div>
</div>

Ответ 1

Это не проблема flexbox. По-видимому, это больше проблема того, как Internet Explorer обрабатывает overflow: hidden.

В вашем коде у вас есть ширина контейнера flex, установленного на 200px. Если вы измените это, скажем, 500px, вы увидите, что justify-content: flex-end отлично работает в IE11 (и всех других основных браузерах).

.token-container {  width: 500px; } /* make this adjustment from 200px */

Похоже, что когда overflow: hidden снимает контент в IE11, уважения к выравниванию флекса не очень много. Вот еще одно испытание:

Восстановите width до 200px. Затем измените выравнивание на justify-content: flex-start.

В IE11 ничего не меняется (flex-start и flex-end выглядят одинаково). Но если вы развернете width до 500px, вы увидите, что фактически применяется flex-start. (То же самое дело с значением center.)

На основе этих тестов я бы сказал, что это не проблема flexbox. В быстром поиске я не мог найти ничего о проблемах с overflow: hidden и IE11, но это может быть проблема.

Ответ 2

Как отмечают другие, забудьте об отключении CSS для IE до версии 11.0. Я немного изменил ваш первый предложенный код, как CSS, так и HTML, выделив измененные/добавленные строки:

.token-container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    box-shadow: 1px 1px 2px 1px silver inset;

    display: flex;
    flex-direction: row;
}
/* you have to nest your tokens inside another div with large fixed margin-left, flex-shrink: 0 (important), and no border nor padding */
.intermediate {
    flex: 1 0 auto;
    padding: 0;
    border: 0;
    margin: 0 0 0 -1000px;
    /* added: constant amount - the more, the better
       the perfect value is the workarea width, but, if available,
       you can use the maximum-width of a token element */
}
.token {
    display: inline-block;
    border: 1px solid silver;
    margin: 1px 3px 0 0;
    border-radius: 4px;
    height: 19px;
    padding: 0 3px;

    float: right; /* added: you need to reverse your tokens! (litte effort) */
}

<div class="token-container">
    <div class="intermediate">
        <!-- reversed children nodes -->
        <div class="token"><span class="token-text">bacon</span></div>
        <div class="token"><span class="token-text">leberkäs</span></div>
        <div class="token"><span class="token-text">pancetta</span></div>
        <div class="token"><span class="token-text">hamburger</span></div>
        <div class="token">
            <span class="token-text">t-bone</span>
        </div>
    </div>
</div>