flex items overlapping in Safari (iPad)

Question

I cannot solve problem with simple task:

• Container is 100% width but with padding-right and box-sizing overflow
• Container is flex row
• Container has two children with dynamic content
• First child has size of content
• Second child takes the rest of width

Expected result:

iPad result:

Example is 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

Try adding flex-shrink: 0 or min-width: auto to .dynamic (revised codepen).