在 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 (revised codepen)。