大家好，我是CUGGZ。又是周五了，提前祝大家周末愉快！今天让我们来看看导致CSS溢出问题的原因以及如何解决这些问题。1、什么是溢出问题？在平时的开发中，我们可能会遇到水平滚动条的问题，尤其是在移动设备上。因为滚动条问题的原因有很多，所以没有直截了当的解决方法。有些问题可以很快解决，有些则需要一点调试技巧，那么什么是溢出问题呢？溢出问题发生在网页上无意中出现水平滚动条，允许用户水平滚动，并且可能由不同的原因引起。二、如何发现溢出问题？下面我们就来看看常见的发现溢出问题的方法。1.向左或向右滚动第一种方法是水平滚动页面。如果可以滚动，则页面有问题。2.使用JavaScript查找比文本宽的元素我们可以在浏览器控制台中添加以下代码片段来显示比主体宽的元素。这对于包含大量元素的页面很方便。vardocWidth=document.documentElement.offsetWidth;[].forEach.call(document.querySelectorAll('*'),function(el){if(el.offsetWidth>docWidth){console.log(el);}});3、使用CSSoutline属性我们可以给页面上的所有元素都加上CSSoutline属性，这样我们就可以看到哪些元素溢出了。您还可以将以下JavaScript代码片段添加到浏览器的控制台，以便为页面上的每个元素添加随机颜色的轮廓。[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})具有以下效果：这使得很容易看出页面上的哪个元素溢出了。4.Firefox中的溢出选项卡Firefox有一个有用的功能，可以告诉我们哪些元素溢出了。5.删除页面元素另一种常用的方法是打开浏览器的DevTools，然后开始一个一个地删除页面元素。一旦问题消失，那么您刚刚删除的部分可能就是溢出问题的原因。我的这种方法在发现问题但不知道为什么会发生的情况下很有用。三、常见的溢出问题1、定宽元素溢出最常见的原因之一就是定宽元素。通常，不要固定将以多种视口尺寸显示的元素的宽度。.element{width:400px;}2.Flex布局当使用Flexbox布局时，当没有可用空间时，如果项目不允许换行，可能会发生溢出。.parent{显示：flex;flex-wrap:wrap;}此处，如果没有足够的空间将flex布局项目全部放在一行中，则flex布局项目会导致水平溢出：-wrap:wrap.parent{显示:flex;flex-wrap:wrap;}3.网格布局响应式设计在使用CSS网格布局时非常重要。以下面的代码为例：.wrapper{display:grid;网格模板列：1fr300px1fr；grid-gap:1rem;}如果视口小于300px，上面的示例将起作用。否则会发生溢出。为避免此类问题，请仅在有足够可用空间时才使用网格布局。我们可以使用以下CSS媒体查询：.wrapper{display:grid;网格模板列：1fr；grid-gap:1rem;}@media(min-width:400px){.wrapper{grid-template-columns:1fr300px1fr;}}4。长词溢出的另一个常见原因是长词不适合视口的宽度。由于视口的宽度，这种情况在移动设备上发生得更多。要解决这个问题，我们需要使用overflow-wrap属性：.article-contentp{overflow-wrap:break-word;}这个修复对于用户输入的内容特别有用。一个常见的例子是评论内容。用户可能会在评论中粘贴很长的URL，我们应该用overflow-wrap属性来处理。5.CSSFlex中的最小内容大小另一个导致溢出的原因是Flexbox中的最小内容大小。这是什么意思？默认情况下，弹性项目不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height道具。为了解决这个问题，我们可以使用可见以外的溢出值，或者设置min-width:0.card__name{min-width:0;overflow-wrap:break-word;}ontheflexitem6.CSSGridMinimumcontentsize和Flexbox一样，CSSgrid布局也有最小内容尺寸的概念。但是，解决方案是不同的。假设有一个带有侧面的包装器和一个带有CSS网格的部分。.wrapper{显示：网格；网格模板列：248px1fr；grid-gap:40px;}另外，section中有一个scrollingsection，这里用到了flexbox。.section{显示：flex;间隙：1rem；overflow-x:auto;}这里没有加flex-wrap，因为预计flex项会在同一行。但是，这没有用，反而导致了水平溢出。我们需要使用minmax()而不是1fr以便主元素的最小内容大小不是自动的。.wrapper{显示：网格；网格模板列：248pxminmax(0,1fr)；grid-gap:40px;}7.负边距在屏幕外的元素可能会导致溢出。通常，这是因为元素具有负边距。在下面的示例中，我们有一个带有负边距的元素，文档的语言是英语（即从左到右）。.element{位置：绝对；right:-100px;}有趣的是，当元素位于左侧时，不会发生溢出。为什么是这样？根据CSS规范：UAs必须在box的block-start和inline-start两边裁剪可滚动容器的可滚动溢出区域。对于英文文档，inline-start一侧是左侧，因此任何位于左侧屏幕外的元素都将被剪掉，以免它们溢出。如果确实需要将元素放置在屏幕外，请确保将overflow:hidden应用于父元素以避免任何溢出。8.没有最大宽度的图片如果你不对大图片进行预处理，你可能会看到溢出。确保在所有图像上设置max-width:100%img{max-width:100%;}9.对视口单位使用100vw的一个缺点是当滚动条可见时它会导致溢出。在macOS上，100vw不会导致水平滚动。在Windows上，默认情况下滚动条始终可见，因此会发生溢出。这是因为当值为100vw时，用户不知道浏览器垂直滚动条的宽度。所以宽度将等于100vw加上滚动条的宽度。但是，CSS没有解决方案来修复它。我们可以使用JavaScript来计算不包括滚动条的视口宽度。functionhandleFullWidthSizing(){constscrollbarWidth=window.innerWidth-document.body.clientWidthdocument.querySelector('myElement').style.width=`calc(100vw-${scrollbarWidth}px)`}原文：https://www.smashingmagazine.com/2021/04/css-overflow-issues/作者：AhmadShadeed译者：CUGGZ
