html 为什么 flex 项目不能缩小到超出内容大小？
问题描述：
我有 4 个 flexbox 列，一切正常，但是当我在列中添加一些文本并将其设置为大字体时，由于 flex 属性，它使列更宽。
我尝试使用 word-break: break-word 并且它有所帮助，但是当我将列调整为非常小的宽度时，它仍然会将文本中的字母分成多行（每行一个字母），但是列的宽度会不小于一个字母的大小。
（一开始邮件回复时字体变大，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循 flex 设置；flex 大小为 1:3:4:4）
我知道，将字体大小和列填充设置得更小会有所帮助……但是还有其他解决方案吗？
我不能使用溢出-x：隐藏。
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
答案 1：弹性材料的自动最小尺寸
您遇到了 flexbox 默认值。
弹性项目不能小于其内容沿主轴的大小。
默认是...
...分别用于行和列方向的弹性项目。
您可以通过将弹性项目设置为：
弹性盒规格
4.5。自动伸缩物品的最小尺寸
为了为弹性项目提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值作为 CSS 2.1 中定义的 min-width 和 min-height 属性的初始值。
关于自动值...
在弹性项目中邮件回复时字体变大，它的溢出相对于主轴是可见的，并且当在弹性项目的主轴最小尺寸属性中指定时，会指定自动最小尺寸。否则，它的计算结果为 0。
换一种方式：
和…
您已经应用了 min-width: 0，但项目仍然没有缩小？
嵌套弹性容器
如果您在 HTML 结构的多个级别处理 flex 项，则可能需要在更高级别的项上覆盖默认的 min-width: auto/ min-height:auto。
基本上，具有 min-width: auto 的更高级别的弹性项目可以防止嵌套在下面的项目缩小 min-width: 0。
浏览器渲染说明
截至 2017 年，Chrome 似乎 (1） 恢复为 min-width:0/min-height:0 默认值，或 (2）0 在某些情况下根据神秘算法自动应用默认值。作为一个结果，这就是他们所说的干预。）很多人看到他们的布局（特别是所需的滚动条）在 Chrome 中运行良好，但在 Firefox/Edge 中却不行。
正如规范所述，对于值 min-width 和 min-height 属性， auto 是“新的”。这意味着一些浏览器可能仍然会默认渲染值0，因为它们实现了flex布局0，min-width和min-height是在值更新之前被CSS2.1中和的初始值
修改后的演示
.container {
display: flex;
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px;
min-width: 0; /* NEW */
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
下一节：通过 PHP 在电子邮件中发送 HTML
如何使用 PHP 发送带有图片的 HTML 格式的电子邮件？我想要一个包含一些设置和 HTML 输出的页面，该页面通过电子邮件发送到一个地址。我该怎么办？主要问题是附加文件。我怎样才能做到这一点？
