минимальная ширина flexbox в IE и Edge - PullRequest
Новая
       14

минимальная ширина flexbox в IE и Edge

0 голосов
/ 04 декабря 2018

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

Я хочу использовать flexbox, чтобы центрировать эту таблицу и установить минимальную ширину дляit.

Цель состоит в том, чтобы центрировать таблицу с минимальной шириной, для которой некоторые столбцы будут иметь одинаковую ширину (такое же соотношение).

Если в некоторых ячейках большетексты, тогда мне все равно, если соотношение будет нарушаться (ширина этого столбца будет больше, чем другие).Мне просто важно, чтобы он имел одинаковую ширину столбцов для общего случая (небольшое количество текстовых данных в ячейках)

Мне удалось найти решение, которое работает на Firefox и Chrome ( ссылка ).

Но для Edge и IE11 таблица растягивается, как если бы она находилась не во флекс-контейнере (попробуйте прокомментировать display: flex; в Firefox или Chrome, и в результате таблица растянется, как в Edge.

Такжепохоже, что иногда настройка столбцов работает ( link2 ). Но я не вижу паттерна, когда он ломается в Edge / IE11.

Вот еще производствопример, которого я хочу достичь (работает в Chrome / Firefox, растянуть в Edge / IE11): пример «рабочей» таблицы .

Любые идеи, как добиться того, чего я хочу в Edge / IE11? (Я выделил жирным шрифтом то, что хочу достичь).

Было бы хорошо, если бы я мог продолжать использовать контейнер flexbox (это может потребовать больше изменений в моей кодовой базе), но я думаю, что я буду в порядке с удалением style=width:p% с <col>, если это необходимо.

1 Ответ

0 голосов
/ 04 декабря 2018

Правило min-width явно игнорируется в Edge / IE11.

Есть эквивалентная команда, которая работает.

Вместо: 

.inner {
    min-width: 800px
}

Используйте: 

.inner {
    flex-basis: 800px; /* 1 */
    flex-shrink: 0;    /* 2 */
}

исправленный кодовый указатель

примечания:

  1. flex-basis заменяет width,в этом случае (см .: flex-basis против width)
  2. flex-shrink: 0 гарантирует, что flex-basis / width не может уменьшиться ниже 800px (следовательно, оба правила вместе эмулируют min-width)
...