ios safari 中的 flex 项目离开屏幕答案

【问题标题】：flex items going off screen in ios safariios safari 中的 flex 项目离开屏幕
【发布时间】：2017-12-01 21:47:29
【问题描述】：

我需要连续三个街区。右边的两个将具有固定的宽度。左边的块是文本块，应该是灵活的。

我的代码适用于 Edge、Firefox 和 Chrome 中的所有分辨率，但不适用于 iOS Safari。

这是真实 iPhone 的屏幕截图。你可以看到它看起来像一个垃圾。最后 2 块超出了屏幕，但我不明白为什么。

.container {
  display: flex;
  justify-content: flex-end;
}

.left {
  border: 1px solid #808080;
}

.center {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

.right {
  border: 1px solid #008000;
}

<div class="container">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus, nihil deleniti expedita labore porro commodi consequuntur, corporis delectus nam, ipsa? Eius inventore est molestias ex, eos odio. Consequuntur, voluptatibus!</div>
  <div class="center">KK</div>
  <div class="right">18:42</div>
</div>

codepen：https://codepen.io/quinnvalor/pen/mwpPaz

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

弹性容器的初始设置是flex-shrink: 1。这意味着弹性项目可以缩小。

显然，Safari 处理这种行为的方式与其他浏览器不同。

对于跨浏览器解决方案，请覆盖默认行为。

将flex-shrink: 0 添加到固定宽度的项目中。

.container {
  display: flex;
  justify-content: flex-end;
}
.left {
  border: 1px solid #808080;
}
.center {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
  flex-shrink: 0;  /* NEW */
}
.right {
  border: 1px solid #008000;
  flex-shrink: 0;  /* NEW */
}

<div class="container">
     <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus, nihil deleniti expedita labore porro commodi consequuntur, corporis delectus nam, ipsa? Eius inventore est molestias ex, eos odio. Consequuntur, voluptatibus!</div>
  <div class="center">KK</div>
      <div class="right">18:42</div>
</div>

https://codepen.io/anon/pen/JJMEGp

【讨论】：