英文:
CSS flex: 0 0 auto is creating a 1px gap
问题
我在CSS中使用了flex: 0 0 auto;，在某些浏览器上，div之间会出现1px的间隙。
问题仅在使用Edge和Safari时出现。在这些浏览器上，它看起来像这样：
有什么方法可以解决这个问题吗？
英文:
I am using flex: 0 0 auto; in CSS and on some browsers there is a 1px gap between the divs.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
background-color: black;
}
.scrollWrapper {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.scrollWrapper > * {
background-color: white;
height: 10%;
width: 100%;
flex: 0 0 auto;
}
<!-- language: lang-html -->
<div class="scrollWrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
The issue only occurs when using Edge and Safari. On these browsers it looks like:
Is there anything to fix this issue?
答案1
得分: 0
使用 box-shadow: 0 0 0 1px white; 的解决方案：
英文:
Solution with box-shadow: 0 0 0 1px white;:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
background-color: black;
}
.scrollWrapper {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.scrollWrapper > * {
background-color: white;
height: 10%;
width: 100%;
flex: 0 0 auto;
box-shadow: 0 0 0 1px white;
}
<!-- language: lang-html -->
<div class="scrollWrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
Special thanks to @G-Cyrillus.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论