css.sub{宽度：100px；最小宽度：50%；max-width:100%;}初始宽度值为100px，加上Uppermin-width和max-width值。结果是元素宽度不超过其包含块/父元素的50%。height属性除了min和maxwidth属性外，我们拥有与height相同的属性。当min-height设置min-height的值时，它的好处是防止使用的height属性的值变得小于min-height指定的值。请注意，min-height的默认值是auto，解析为0。让我们用一个简单的例子来演示。我们有一个带有描述文本的部分。目标是为该部分设置一个最小高度，以便它可以处理短内容或长内容。考虑以下基本情况.sub{display:flex;对齐项目：居中；证明内容：居中；填充：1rem；最小高度：100px；颜色：#fff；background:#3c78dB;}min-height为100px，当使用flexbox时，内容水平和垂直居中。如果内容更长会怎样？例如一个段落？是的，你猜对了！该部分的高度将扩展以包含新内容。有了它，我们可以构建响应其内容的灵活组件。示例源码：https://codepen.io/shadeed/pe...max-height设置max-height值时，其好处是防止height属性使用的值超过max-height的指定值.请注意，max-height的默认值是none。考虑下面的示例，我在其中为内容设置了最大高度。但是，因为它大于指定的空间，所以会发生溢出。因此，文本超出了其父级的范围。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。最小和最大属性的用例我们将介绍最小宽度、最小高度、最大宽度和最大高度的一些常见和不常见用例。选项卡列表当有选项卡列表时，建议限制选项卡的最小宽度，这样即使其内容较短，也不会影响其外观。通过这种灵活性，无论内容多短，标签都会看起来不错。但是，如果内容作者输入了一个很长的标签名称，而他使用的内容管理系统没有标签的最大字符长度限制，会发生什么情况？我们也可以使用最大宽度。.c-tag{显示：内联块；最小宽度：100px；最大宽度：250px；溢出：隐藏；空白：nowrap；文本溢出：省略号；/*Otherstyles*/}通过使用max-width，标签宽度将被限制为一个特定的值。但是，这还不够，标签名称应该被截断。示例地址：https://codepen.io/shadeed/pe...按钮对于按钮的最小值和最大值有不同的用例，因为按钮组件有很多变体。考虑下图：请注意按钮的“获取”宽度太小。如果您不设置最小宽度，无论出于何种原因没有文本，情况都会变得更糟。在这种情况下，设置最小宽度很重要。使用flexbox将最小宽度设置为零。min-width的默认值为auto，评估为0。当元素是flex项目时，min-width的值不会评估为0。弹性项目的最小尺寸等于其内容的尺寸。根据CSSWG：默认情况下，弹性项目不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。考虑以下示例，其中人名中的单词很长，这会导致溢出和水平滚动。不过，我在标题中添加了以下CSS以截断它。c-person__name{white-space:nowrap;溢出：隐藏；文本溢出：省略号；由于title是一个flex项目，解决方案是重置min-width并将其强制为零。.c-person__name{/*Otherstyles*/min-width:0;}这是根据CSSWG的修复方法：在flex项目的主轴上有可见溢出的项目上，当处于flex项目的主轴最小尺寸时property指定时，指定自动最小大小。意思是设置overflow为非visible值会导致min-width被计算为0，解决了我们没有设置min-width:0的问题。示例源码：https://codepen.io/shadeed/pe...使用flexbox将min-height设置为零虽然与min-width相比这是一个不太常见的问题，但它可能会发生。只是为了确认，问题与不能小于其内容的弹性项目有关。生成的最小高度值设置为与内容一样长。考虑以下示例：红色指示的文本应在父文本中被剪裁。因为面板主体是弹性项目，所以它的最小高度等于它的内容。为了防止这种情况，我们应该重新设置最小高度值。查看HTML和CSS的外观。HTML