Javascript-форум - display: flex в IE10 (11)

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - display: flex в IE10 (11) (https://javascript.ru/forum/xhtml-html-css/74589-display-flex-v-ie10-11-a.html)

display: flex в IE10 (11)

Всем привет. Столкнулся со следующей проблемой. Если кто-нибудь сталкивался, подскажите пожалуйста.

<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>

Если у тега a (в данном случае) установлено свойство: display: flex, то текст в IE не переносится на новую строку. Как данную проблему решить?

Цитата:

Сообщение от s24344

текст в IE не переносится на новую строку

У меня переносится...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
a {
	display: flex;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>
</body>
</html>

Простите, я привел не корректный пример. Ниже приведена верска с существующей проблемой в IE10

<ul class="list">
  <li class="list__item"><a class="list__link" href="#"><span>First</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Second</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Third</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></li>
</ul>

.list {
  display: flex;
  max-width: 1170px;
  margin: 0 auto;

  &__item {
    padding: 25px 18px;
  }
}

Цитата:

Сообщение от s24344

Ниже приведена верска с существующей проблемой в IE10

ИЕ10 видать положил на Флекс с прибором. :D

Альтернативный вариант.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.list {
	border: 1px solid;
	max-width: 1170px;
	margin: 0 auto;
}
.list__item {
	vertical-align: top;
	padding: 25px 18px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table class="list">
	<tr>
	<td class="list__item"><a class="list__link" href="#"><span>First</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Second</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Third</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></td>
	</tr>
</table>
</body>
</html>

Цитата:

Сообщение от ksa

ИЕ видать положил на Флекс с прибором.

Так и есть...
https://caniuse.com/#search=flexbox

&__item {
    padding: 25px 18px;
    flex: 1 1 auto;
}