Flex项目在iOS Safari中不显示在屏幕上 [英] flex items going off screen in ios safari
问题描述
我需要连续三个块.右边的两个将具有固定的宽度.左边的块是文本块,应该灵活.
I need to have three blocks in a row. The two on the right will have fixed width. The left block is a text block and should be flexible.
我的代码可在Edge,Firefox和Chrome的所有分辨率下使用,但不适用于iOS Safari.
My code works in all resolutions in Edge, Firefox and Chrome, but not iOS Safari.
这是真实iPhone的屏幕截图.您可以看到它似乎是垃圾.最后2个块位于屏幕之外,但我不明白为什么.
This is a screenshot from the real iPhone. You can see that it seems like a trash. The last 2 block get outside the screen, but I can't understand why.
.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 >
codepen: https://codepen.io/quinnvalor/pen/mwpPaz
推荐答案
flex容器的初始设置为flex-shrink: 1
.这意味着弹性项目可以收缩.
An initial setting of a flex container is flex-shrink: 1
. This means that flex items can shrink.
很明显,Safari处理此行为的方式与其他浏览器不同.
Clearly, Safari handles this behavior differently than other browsers.
对于跨浏览器解决方案,请覆盖默认行为.
For a cross-browser solution, override the default behavior.
在固定宽度项目中添加flex-shrink: 0
.
Add flex-shrink: 0
to the fixed-width items.
.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
这篇关于Flex项目在iOS Safari中不显示在屏幕上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!