在本文中，雷切尔·安德鲁（Rachel Andrew）讨论了您可能会在网站布局中遇到溢出的情况，并解释了在事先不知道大量内容的情况下CSS如何演变为创建更有效的布局方法。
CSS旨在使内容可读。 如果您正在查看标有标题和段落的HTML文档（不带CSS），则该HTML文档将以易于阅读的形式显示在浏览器中。 标题大而粗体，在段落之间有空格，该空格由嵌入在浏览器中的样式表控制。 但是，一旦您需要更改页面的布局，就将开始将设计控制权掌握在自己手中。 在某些情况下，这意味着您需要使用溢出的元素来接管工作。
在本文中，我将考虑不同的情况，在这些情况下我们可能会在网络上遇到溢出。 我们将看到新的标记方法和新的CSS值如何帮助我们处理溢出并创建不那么脆弱的设计。 我还将解释CSS设计的基本概念之一-防止数据丢失。
溢出是什么意思？
如果您回溯几年（在Flexbox和Grid等布局方法问世之前），请考虑如何实现以下示例。 具有不同内容量的三个块的非常简单的布局，但是其下边界应在同一行上。
使用float，这看似简单的任务是不可能的。 当一个块被简化（浮动）时，它不会与它的邻居互动。 这意味着无法找出下一个更高的元素并将电流增加到相同的高度。
有时，开发人员试图将元素排成一行，开发人员设置了固定的块高，试图预测使该高度相同的可能内容的数量。 当然，网络不是那么简单，当内容量不同或文本大小变大时，文本开始超出块的底部。 这是一个溢出。
有时人们会问如何防止过多的内容到达该网站。 正是由于这个原因，询问了如何限制内容的用户联系了我的CMS的技术支持。 他们说，这些附加内容“破坏了布局”。 对于那些了解不可能知道元素的高度是布局的基本本质的人来说，他们迫使我们创建隐藏没有等高块的布局。 常见的解决方案是添加渐变，以消除超出边界的内容。 我们将避免使用背景色和块框。 或者，我们将使用人工柱技术来使元素的高度相同。
由于无法控制一个元素相对于另一个元素的高度，因此影响了Web设计-一种技术限制改变了网站的设计方式。 我很高兴，随着Flexbox和Grid的出现，这个问题不仅消失了，而且默认情况下，这些新布局方法的行为将这些块拉伸到了相同的高度。
align-items - stretch属性的初始值
align-items - stretch ，因此，块将被拉伸到Grid-area或Flex容器的高度。
另外，CSS Grid为我们提供了一种将元素指定为一定大小的好方法，但是可以根据需要增加它们的大小。 如果使用minmax（）函数设置轨道（列或行）的大小，则可以看到其最小和最大大小。 将行设置为
minmax(200px, auto)意味着即使网格元素为空，轨迹也将始终至少为200像素。 但是，如果grid元素的内容大于200px，则由于
auto的值
auto该元素可以增长。 您可以在下面的示例中看到它。 第一行是200px，因为没有元素可以增加它。 第二行包含一个网格元素，该网格元素的内容不合适，并且
auto值开始起作用，因此该行变得大于200px。
minmax()函数使您能够创建接口，就好像它们是完美的固定大小一样。 在理想的世界中（当内容量达到期望值时），您将获得这些美丽，相同的线条。 但是，如果添加其他内容，则不会发生溢出，就像将固定行高设置为200px一样。 字符串将展开； 作为开发人员，它可能并不完全符合您的意愿，但并非无法理解。
线路溢出
每当我们限制元素的大小时，就会发生溢出的风险。 在上面的示例中，我描述了块维度中的约束，使用水平语言的用户会将其视为高度。 但是，如果我们限制块的宽度，我们也会溢出。 这就是我们在CSS中看到的Amesome meme。
这个模因的作者
在关于此
的CSS-Trick帖子中评论说：
现在，我对溢出的概念有了更好的了解，但是那时，我不明白为什么有人认为默认行为应该将文本推到块的右侧，而不是像表一样总是将块增大，这让我的大脑震惊了。 。
那么，为什么CSS会将文本推送到框外而不是增加块本身的大小呢？
该模因在行方向上溢出。 单词“ awesome”大于应用于块的宽度，这就是它溢出的原因。 CSS合理地假设，如果给块提供一定的宽度，则需要一个具有该宽度的块。 也许他应该采用一种布局，如果块突然变得大于所设置的大小，则布局会中断。
这个特殊的问题（即需要设置所有布局元素的尺寸并确保它们的总和不超过可用的容器空间）是现代布局方法为我们解决的问题。 如果我们想象我们的块具有如此特殊选择的大小，可以与浮动网格中的其他块排成一行，那么今天您可以选择使用Flexbox。
使用浮动布局时，应该设置每个元素的大小-也许在知道其内容之前。 在这种情况下，您可能会发现较大的内容将放在较小的容器中，而较小的内容将具有额外的空间。
但是，如果使用Flexbox，则可以让浏览器计算要为每个元素分配多少空间。 Flexbox将为较大的物品提供更多的空间，而较小的物品将获得更少的空间。 这种灵活的大小分布意味着包含单词“ awesome”的块将增加以容纳所有内容，并且文本将不会超出该范围。 解决了溢出问题； 这种行为正是创建Flexbox的目的。 Flexbox可以很好地处理不同大小的元素，并将它们组织成最适合它们的布局。
在Flexbox之外，我们可以说我们的块应该与内容所需的一样大，而不能超过其他任何内容。 当使用与流相关的逻辑属性时，min-content关键字可用作width或inline-size属性的值。 设置宽度：最小内容，该块将增长到足以容纳单词“ awesome”的程度。
防止数据丢失
块溢出的原因（例如，在示例中单词扩展到块边界之外）是因为
overflow属性的默认值为
visible 。 您可以（如果需要）以其他方式控制溢出。 例如，使用
overflow: auto或
overflow: scroll可以为您的块提供滚动条。 在这种情况下，这可能不是您想要的，但是在某些情况下，带有滚动条的块将是合适的。
您还可以假定已经准备好使用
overflow: hidden来修剪溢出。 您可能曾认为默认情况下隐藏溢出会更好，但是CSS选择默认使溢出可见（而不是隐藏）的事实是CSS开发核心价值的关键。 在CSS中（与许多其他技术一样），我们尝试避免数据丢失。 当我们谈论CSS中的数据丢失时，我们通常会谈论内容中不可见的部分。 如果发生
overflow: hidden ，则溢出父块的内容将消失。 这意味着我们无处可寻，找不到丢失的部分。
在某些情况下，这可能是一个严重的问题。 如果您设法使布局如此脆弱，以致于表单上的按钮超出了可见区域，则用户将无法提交表单。 如果文本的最后一段被删去，我们将永远不知道故事的结局。 而且，元素消失的问题在于它们并不总是很明显消失。 作为开发人员，您可能不会注意到该问题，尤其是在响应式设计中仅在某些查看区域大小下才发生此问题。 您的用户可能没有注意到问题-他们根本看不到号召性用语，或者他们认为无法下订单的问题出在设备上，他们只是离开了。 但是，如果元素在不应该溢出的地方溢出，您很可能会注意到这一点。 或者，在最坏的情况下，访问该网站的人会注意到这一点并告知您。
这就是为什么CSS元素中漫不经心且引人注目的原因。 通过明确地看到溢出，与仅隐藏多余的内容相比，您更有可能纠正错误。 但是，在溢出属性的帮助下，您有机会自行决定应如何处理。 如果您希望减少溢出（在某些情况下可能是正确的解决方案），请使用
overflow: hidden 。
数据丢失和对齐
我们在过去几年中收到的最好的平衡工具也可能导致数据丢失。 考虑一列伸缩元素，它们位于视口的边缘并具有不同的大小。 与
flex-start值对齐时，元素向右突出。 但是，当以
center为
center ，较宽的元素将超出视口的范围。 因此，对齐会导致数据丢失。
为了防止对齐导致意外数据丢失，CSS现在提供了几个可以与对齐属性结合使用的新关键字。 它们在“框对齐”中定义，“框对齐”是一个涉及所有设计方法（包括“网格”和“ Flexbox”）的对齐规范。 当前仅在Firefox中支持它们。 在上面的示例中，如果我们设置
align-items: safe center ，则最后一项将左对齐而不是居中。 这样可以防止由于元素居中而导致数据丢失，因此可以将其推出视口。
如果需要对齐（即使导致对齐），则可以指定
unsafe center 。 在这种情况下，您要求浏览器执行选择的对齐方式，而不管内容如何。 如果您使用的是Firefox，则可以看到两个示例：第一个示例具有安全的对齐方式，第二个示例具有不安全的对齐方式。
在写这篇文章的基础上，我将
报告描述为布局
与溢流之间的
不断斗争 。 网络的设计真理之一是，很难知道包含文本的元素的大小。 但是，正如我在上面显示的，我们从来没有太多控制溢出的方法。 这意味着我们的布局可以更具可持续性，并且我们可以创建适用于不同内容量的模板。 这似乎只是很小的变化，但我认为它们为我们带来了巨大的机会。