在Safari（iPad）中重叠的项目

Posted 2021-05-02

我无法用简单的任务解决问题：

• 容器是100％宽度，但有填充权和盒子大小溢出
• 容器是弹性排
• Container有两个具有动态内容的孩子
• 第一个孩子的内容大小
• 第二个孩子占据了其余的宽度

预期结果：

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>

答案

尝试将flex-shrink: 0或min-width: auto添加到.dynamic（revised codepen）。