CSS flex: 0 0 auto 正在创建一个 1px 的间隙。

huangapple
go评论97阅读模式
英文:

CSS flex: 0 0 auto is creating a 1px gap

问题

我在CSS中使用了flex: 0 0 auto;，在某些浏览器上，div之间会出现1px的间隙。

问题仅在使用Edge和Safari时出现。在这些浏览器上，它看起来像这样：

CSS flex: 0 0 auto 正在创建一个 1px 的间隙。

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

英文:

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

  1. body {
  2.     overflow: hidden;
  3.     position: relative;
  4.     height: 100vh;
  5.     width: 100vw;
  6.     background-color: black;
  7. }
  9. .scrollWrapper {
  10.     position: relative;
  11.     overflow-x: hidden;
  12.     overflow-y: scroll;
  13.     display: flex;
  14.     flex-direction: column;
  15.     height: 100%;
  16.     width: 100%;
  17. }
  19. .scrollWrapper &gt; * {
  20.     background-color: white;
  21.     height: 10%;
  22.     width: 100%;
  23.     flex: 0 0 auto;
  24. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;scrollWrapper&quot;&gt;
  2.     &lt;div&gt;&lt;/div&gt;
  3.     &lt;div&gt;&lt;/div&gt;
  4.     &lt;div&gt;&lt;/div&gt;
  5.     &lt;div&gt;&lt;/div&gt;
  6.     &lt;div&gt;&lt;/div&gt;
  7.     &lt;div&gt;&lt;/div&gt;
  8.     &lt;div&gt;&lt;/div&gt;
  9.     &lt;div&gt;&lt;/div&gt;
  10.     &lt;div&gt;&lt;/div&gt;
  11.     &lt;div&gt;&lt;/div&gt;
  12.     &lt;div&gt;&lt;/div&gt;
  13.     &lt;div&gt;&lt;/div&gt;
  14.     &lt;div&gt;&lt;/div&gt;
  15.     &lt;div&gt;&lt;/div&gt;
  16.     &lt;div&gt;&lt;/div&gt;
  17.     &lt;div&gt;&lt;/div&gt;
  18.     &lt;div&gt;&lt;/div&gt;
  19.     &lt;div&gt;&lt;/div&gt;
  20.     &lt;div&gt;&lt;/div&gt;
  21.     &lt;div&gt;&lt;/div&gt;
  22. &lt;/div&gt;

<!-- end snippet -->

The issue only occurs when using Edge and Safari. On these browsers it looks like:

CSS flex: 0 0 auto 正在创建一个 1px 的间隙。

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

  1. body {
  2.     overflow: hidden;
  3.     position: relative;
  4.     height: 100vh;
  5.     width: 100vw;
  6.     background-color: black;
  7. }
  9. .scrollWrapper {
  10.     position: relative;
  11.     overflow-x: hidden;
  12.     overflow-y: scroll;
  13.     display: flex;
  14.     flex-direction: column;
  15.     height: 100%;
  16.     width: 100%;
  17. }
  19. .scrollWrapper &gt; * {
  20.     background-color: white;
  21.     height: 10%;
  22.     width: 100%; 
  23.     flex: 0 0 auto;
  24.     box-shadow: 0 0 0 1px white;
  25. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;scrollWrapper&quot;&gt;
  2.     &lt;div&gt;&lt;/div&gt;
  3.     &lt;div&gt;&lt;/div&gt;
  4.     &lt;div&gt;&lt;/div&gt;
  5.     &lt;div&gt;&lt;/div&gt;
  6.     &lt;div&gt;&lt;/div&gt;
  7.     &lt;div&gt;&lt;/div&gt;
  8.     &lt;div&gt;&lt;/div&gt;
  9.     &lt;div&gt;&lt;/div&gt;
  10.     &lt;div&gt;&lt;/div&gt;
  11.     &lt;div&gt;&lt;/div&gt;
  12.     &lt;div&gt;&lt;/div&gt;
  13.     &lt;div&gt;&lt;/div&gt;
  14.     &lt;div&gt;&lt;/div&gt;
  15.     &lt;div&gt;&lt;/div&gt;
  16.     &lt;div&gt;&lt;/div&gt;
  17.     &lt;div&gt;&lt;/div&gt;
  18.     &lt;div&gt;&lt;/div&gt;
  19.     &lt;div&gt;&lt;/div&gt;
  20.     &lt;div&gt;&lt;/div&gt;
  21.     &lt;div&gt;&lt;/div&gt;
  22. &lt;/div&gt;

<!-- end snippet -->

Special thanks to @G-Cyrillus.

huangapple
  • 本文由 发表于 2023年6月16日 15:50:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76488045.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定