Столбец Flex, сжимающийся с помощью textarea [duplicate]

Как и в ответе @Michael_B, ограничьте рост с помощью свойства Flexbox flex: flex: 0 1 (1/n - b), принятого в%, где n - количество элементов гибкости в строке, а b - это промежуток, который вы хотите для просмотра элементов гибкости в IE.

На элементах flex вместе с flex свойство выше используется свойство max-width с процентным значением 1/n - b.

В вашем случае обобщенный CSS для элемента flex будет выглядеть следующим образом:

li {
    // ... the remaining code from your snippet
    // Calculate the following manually and insert or use CSS preprocessor that does math for you.
    // See the formula explanation above.
    max-width: (your flex container max-width / 2) * 100% - b; 
    flex: 0 1 (your flex container max-width / 2) * 100% - b;
}

В реальном случае с 5 элементами / строкой будут (1/5) * 100% - 1% = 19% => max-width: 19% и flex: 0 1 19%;.

Поиграйте с параметром b, чтобы сделать гибкие элементы достаточно короткими, чтобы работать flex: wrap;.

Для меня использование

  flex: 1 1 auto;

вместо

  flex: 1;

решило проблему flex в IE 11.

Просто используйте flex:1 0 auto;. Он будет работать.

У IE проблема с анализом свойства flex.

Вот несколько обходных решений, которые сработали для меня:

• Используйте долгосрочные свойства вместо стенография. Вместо чего-то вроде этого: flex: 0 0 35%. Попробуйте следующее: flex-grow: 0 flex-shrink: 0 flex-basis: 35%

• Убедитесь, что flex-shrink включен. Поэтому вместо этого: flex: 0 0 35% Попробуйте следующее: flex: 0 1 35% (В других случаях flex-shrink должно быть отключено : Элемент Flex перекрывает другой элемент в IE11 )

• Осторожно с процентными и безразмерными значениями с flex-basis Это может зависеть от вашей версии IE11. Поведение меняется. Попробуйте следующие варианты: flex: 1 1 0 flex: 1 1 0px flex: 1 1 0% Подробнее здесь: Поведение изображения в flexbox (строки, встроенные в столбцы) Почему свойство shorthand flex ведет себя иначе, чем свойства long hand в IE ?

• Вместо flex: 1 используйте flex: auto (или добавьте в flex-basis: auto) Если вы используете flex: 1 в flex-direction: row ] (например, на более крупных экранах), и вы переключитесь на flex-direction: column в запросе на медиа (скажем, для мобильных устройств), вы можете обнаружить, что ваши элементы гибки обрушиваются. В запросе на медиатеку добавьте flex-basis: auto. Это переопределит значение flex-basis в правиле flex: 1 (обычно это 0, 0px или 0%, в зависимости от браузера). Использование flex: auto должно также работать, что мало для: flex-grow: 1 flex-shrink: 1 flex-basis: auto

• Использовать старую моду width / height вместо flex.

• Используйте макет block вместо макета flex. Вам не нужно полностью отказаться от гибкого макета. Но для конкретного контейнера вы можете выполнить работу с display: block вместо display: flex; flex-direction: column. Например, при необходимости использовать трюк padding для интерактивного встраивания видео в гибкий элемент, препятствие, с которым я столкнулся, состояло в том, что некоторые браузеры плохо работают с процентным заполнением (или маржи) в гибком контейнере . Чтобы это сработало, я переключил значение display на элемент flex из этого:

  /* a flex item, also a nested flex container */
  #footer-container > article {
      display: flex;
      flex-direction: column;
  }
  

  на это:

  #footer-container > article {
      display: block;
  }