如何在template容器内设置textarea的max-width为50rem

问题核心在于：.template作为flex容器.row的子元素时，默认会被flex布局压缩宽度，导致内部textarea的width:100%只能基于被压缩后的容器宽度，无法触发max-width:50rem的限制。

可以通过以下两种方式修复：

方案一：让容器自适应内容最大宽度 #

给.template添加样式，解除flex子项的最小宽度限制，并让容器宽度自适应内容尺寸：

.row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

.box {
    width: 100%;
    max-width: 50rem;
}

.template {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.75rem;
    align-items: center;
    height: 100%;
    min-width: 0; /* 解除flex子项的最小宽度限制 */
    max-width: fit-content; /* 让容器宽度自适应内容的最大宽度 */
}

方案二：直接指定容器的最大宽度 #

计算.template的总最大宽度（label宽度 + 间隙 + textarea最大宽度），确保容器能容纳textarea的最大尺寸：

.row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

.box {
    width: 100%;
    max-width: 50rem;
}

.template {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.75rem;
    align-items: center;
    height: 100%;
    max-width: calc(50rem + 3rem + 0.75rem); /* 计算容器总最大宽度 */
    width: 100%;
}

两种方案都能让textarea的max-width:50rem正常生效，同时保持原有布局结构不变。

内容的提问来源于stack exchange，提问作者Heisenberg