影响了网页设计这种技术限制
改变了我们的设计方式。（我很喜欢 Flexbox 和 Grid。）这个问题不仅消失了，而且这些新布局方法的默认行为是将框拉伸到相同的高度。的初始值align-items是stretch，这会导致盒子拉伸到网格区域或弹性容器的高度。 请参阅Rachel Andrew的钢笔等高框。 此外，CSS 网格为我们提供了一种很好的方法来要求事物至少达到一定的大小，但如果需要的话可以变大。如果使用该功能设置轨道大小minmax()，您可以看到轨道的最小和最大尺寸。将 rows 设置为minmax(200px, auto)意味着轨道在块维度中始终至少为 200 像素 - 即使网格项为空。但是，如果网格项的内容意味着它将大于 200 像素，则在设置最大值的情况下，auto它可以增长。您可以在下面的示例中看到这一点：第一行是 200 像素，因为没有任何项目使其变大。第二行有一个网格项，其中包含的内容超出了容。纳范围，因此auto正在使用，并且轨道已变得大于 200 像素。 请参阅Rachel Andrew的Pen Minmax()。 该minmax()功能使您能够创建看起来具有完美固定尺寸的设计。在理想的情况下（当内容量与您的预期相当时），您将得到那些漂亮的统一行。但是，如果 Whatsapp 号码列表 添加其他内容，则不会像将行高固定为 200 像素时那样出现溢出。该行将扩展；它可能不完全是你作为设计师想要的，但它不会不可读。 主体：120+ 原生 React UI 组件与 Next.js 完全兼容 尝试 KENDOREACT 内联溢出 每当我们限制事物的大小时，就有可能发生溢出。在上面的示例中，我描述了块尺寸的限制，水平语言用户会将其视为高度。然而，如果我们限制盒子的内联大小或宽度，我们也可能会在内联方向上出现溢出。这是我们在“CSS is Awesome”模因中看到的内容： 图像的边框框中包含“CSS is Awesome”字样。 “awesome”这个词太长，无法放。
https://zh-cn.mobilenumbers.me/wp-content/uploads/2023/12/Whatsapp-%E5%8F%B7%E7%A0%81%E5%88%97%E8%A1%A8-1-300x150.png
入框内，因此超出了边框 “CSS Is Awesome”模因（大预览） 这个表情包的作者在一篇有关它的 CSS-Tricks 帖子中评论道： “我现在确实对溢出的概念有了更好的理解，但当时有人认为默认行为应该是让文本从盒子里出来，而不是仅仅让盒子发出声音，这让我大吃一惊。就像我以前漂亮、实用的桌子一样更大。” 那么为什么 CSS 会让文本“开箱即用”而不是让文本变大呢？ 在模因中，您在内联方向上发生了溢出。“awesome”这个词比盒子的宽度大，所以它会溢出。CSS 相当合理地假设，如果您已将框设置为一定宽度，则您希望框具有该宽度。也许它需要适应一个布局，如果盒子突然变得比设定的大，这个布局就会被破坏。 我们的现代布局方法已经为我们解决了这个特定问题（即需要为布局中的所有内容设置尺寸并确保它们的总和不超过容器的可用内联尺寸）。如果我们想象我们。
頁:
[1]