сгибание элементов в Safari (iPad)

Question

Я не могу решить проблему с помощью простой задачи:

• Контейнер шириной 100%, но с переполнением вправо и размером блока
• Контейнер гибкий ряд
• Контейнер имеет двух дочерних элементов с динамическим содержимым
• Первый ребенок имеет размер содержимого
• Второй ребенок занимает остаток ширины

Ожидаемый результат:

iPad результат:

Пример: https://codepen.io/anon/pen/zaMwvr

#wrap {
  width: 100%;
  border: 1px dashed orangered;
  box-sizing: border-box;
  padding-right: 300px;
  position: relative;
}

#padding-view {
  width: 300px;
  position: absolute;
  background: coral;
  right: 0;
  height: 100%;
}

#flex {
  display: flex;
}

<div id="wrap">
  <div id="padding-view"></div>
  <div id="flex">
    <div id="dynamic">LALALCALCULATEDDYNAMICLY</div>
    <div id="rest">{Long text here}</div>
  </div>
</div>

Answer 1

Попробуйте добавить flex-shrink: 0 или min-width: auto к .dynamic ( пересмотренная кодовая ручка ).