Столбцы с равной шириной flexbox в IE

Question

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

Я могу решить эту проблему, установив max-width: 50%, но это означает, что нам нужны проценты, основанные на количестве нужных столбцов. Он работает для двух столбцов, но для трех нам понадобится 33.333% и т. Д.

Есть ли другой способ сделать IE10/11, чтобы поддерживать ширину гибки?

<div class="columns"> 
    <div class="column"> 
    <p>hey there this is some long text</p> 
    </div> 
    <div class="column"></div> 
</div> 


.columns { 
    display: -ms-flexbox; 
    -ms-flex-flow: row; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row; 
    flex-flow: row; 
    width: 100%; 
} 

.column { 
    -ms-flex: 1 0 auto; 
    -webkit-flex: 1 0 0; 
    flex: 1 0 0; 
    min-height: 200px; 
    border: 1px solid red; 
} 

http://jsbin.com/gimifixexo/1/edit?html,css,output

Answer 1

Так прогибается сейчас является серьезной проблемой для IE10/11. У этого есть некоторые серьезные проблемы, которые имеют работу вокруг. У меня нет среды для тестирования, но приведенная ниже ссылка должна предоставить вам ресурсы, необходимые для решения вашей проблемы.

http://caniuse.com/#search=flex

Обратите внимание на известных проблем, это просто примечание. Несмотря на то, что CanIUse делает список flex как работающий для IE11, я могу подтвердить, что многие его элементы также сломаны.

Кроме того, вы знаете, если хотите использовать столбцы и иметь нечетное число, например 3. Использование 33% будет работать отлично. На вершине этого просто использовать

justify-content: space-between 

или в качестве альтернативы

justify-content: space-around; 

Это сделает это, кажется, как столбцы, которые равномерно распределены по интервалы между ними соответствующим образом. Здесь содержится дополнительная информация об обосновании содержания. https://css-tricks.com/almanac/properties/j/justify-content/

Answer 2

Я нахожу, что IE будет расти гибкого ребенка с его содержанием, в то время как другие браузеры сохранить каждый Flexbox при одинаковой ширине.

Нет, это не совсем правильно, все они по умолчанию имеют размер элемента flex на основе его содержимого.

Существует разница, хотя, где для большинства браузеров по умолчанию гибкого элемента прогибается является flex: 0 1 auto, но IE10 это flex: 0 0 auto.

В основном это означает, что все, кроме IE10, позволяют гибким элементам сжиматься (второе значение представляет собой flex-shrink).

Чтобы сделать эту работу, все, что должно быть необходимо, это flex: 1 1 0.

Но, также сделать IE 10 и 11 ведут себя, мы должны дать Flex-базис блок, 0px и IE10 также может понадобиться width: 100%, хотя можно сказать наверняка, как я бегу мое эмулировать.

С короткой flex: 1, IE11 будет, в целом, автоматически устанавливает Flex-основ с единицей, хотя для IE10 не может, и я не полностью уверен, что если приставка свойство ошибки бесплатно , и поскольку я не могу проверить его правильно, не имея устройств со старыми браузерами, использование полной стенограммы *-flex будет более безопасным.

Stack фрагмент

.columns { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    /* "flex-flow: row" is default, and so is "width: 100%" 
 
    -ms-flex-flow: row; 
 
    -webkit-flex-flow: row; 
 
    flex-flow: row; 
 
    width: 100%;*/ 
 
} 
 

 
.column { 
 
    -ms-flex: 1 1 0px;     /* IE10 fix */ 
 
    -webkit-flex: 1 1 0;    /* changed */ 
 
    flex: 1;       /* changed */ 
 
    min-height: 70px; 
 
    border: 1px solid red; 
 
    width: 100%;      /* IE10 might need this */ 
 
}

<div class="columns"> 
 
    <div class="column"> 
 
    <p>hey there this is some long text</p> 
 
    </div> 
 
    <div class="column"></div> 
 
</div> 
 

 
<div class="columns"> 
 
    <div class="column"> 
 
    <p>hey there this is some long text</p> 
 
    </div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div> 
 

 
<div class="columns"> 
 
    <div class="column"> 
 
    <p>hey there this is some long text</p> 
 
    </div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div>