Html CSS flex：0 0 auto创建了1像素的间隙

发布于06月18日

我在css中使用的是flex: 0 0 auto;，在一些浏览器上，div之间有1px的差距.

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;
}

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

此问题仅在使用Edge和Safari时出现.在这些浏览器上，它看起来如下所示:

有什么办法可以解决这个问题吗？

推荐答案

box-shadow: 0 0 0 1px white;的解决方案:

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;
}

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

特别感谢@G-Cyrillas.