ios - 在 Safari (iPad) 中重叠的 flex 元素

Question

我不能用简单的任务解决问题:

• 容器宽度为 100%，但有 padding-right 和 box-sizing overflow
• 容器是 flex 行
• 容器有两个动态内容的 child
• 第一个 child 有内容的大小
• 第二个 child 占据剩余的宽度

预期结果:

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 )。