Flex-wrap не переносит элементы в IE11 - PullRequest
Новая
       98

Flex-wrap не переносит элементы в IE11

6 голосов
/ 03 августа 2020

Я использую контейнер flexbox, который включает два div одинаковой ширины. Слева отображается изображение, а справа - текст. Код оборачивает элементы для Google Chrome, но в Inte rnet Explorer 11 он перемещает правую часть поверх левой. Как я мог это исправить? Я пытался использовать flex: auto для обоих потомков, а также flex-grow: 1, flex-shrink: 1 и flex-basis: 0 / flex-basis: auto. Я также пытался добавить px или % к 0, но все они дают одинаковые результаты ...

image 

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}
<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Ответы [ 2 ]

3 голосов
/ 05 августа 2020

Вы можете обратиться к этому образцу кода. Изображение сначала имеет исходный размер, а левая и правая части имеют одинаковую ширину. Хорошо работает в IE 11: 

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}

/* adjustment */
img {
  width: 100%;
  height: auto;
  max-width: 300px;
}
<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Результат в IE:

введите описание изображения здесь

3 голосов
/ 04 августа 2020

Добавьте flex: auto к первому дочернему элементу.

Для масштабирования изображения добавьте img { width: 100%; height: auto; }

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: auto; /* adjustment */
  justify-content: center;
  max-width: 250px; /* optional; limits image size */
}


/* image scaling */
img {
  width: 100%;
  height: auto;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}
<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
...