Html text在表内时，区域宽度不受最大宽度约束

讨厌问，因为已经有一堆看似相关的答案了，但我找不到确切的组合

我有一个包含textarea的表，textarea有一个大cols属性，但是textarea即使应用了max width也会打破它的约束

以下是容器为div时的工作解决方案：

.container{
边框：2倍纯色橙色；
宽度：200px；
填充：10px；//为清晰起见添加
}
.分箱{
填充：10px；//为清晰起见添加
边框：1px纯绿色；
}
文本区{
最大宽度：100%；//正确约束在容器宽度内
边框：1px红色虚线；
}

这里是相同的设置，但容器是一个表（>tr>td）：

.集装箱{
边框：2倍纯色橙色；
宽度：200px；//显式设置为演示，但实际上我使用的是定义了flex基值的flexbox，显示的效果相同
填充：10px；//为清晰起见添加
}
.分箱{
边框：1px纯绿色；
}
文本区{
最大宽度：100%；//是否应限制cols提供的默认宽度？
边距：10px；//为清晰起见添加
边框：1px红色虚线；
}

---

通过在表约束文本区域上指定

width:100%

以及

max width

，然后应用约束。我希望避免显式添加宽度规则

所以我的问题是，是否有一个优雅的解决方案，我不必提供一个明确的宽度规则，允许子textarea遵守容器宽度

请注意：我正在处理遗留代码，所以替换表不是一个我可以立即考虑的解决方案。

---

起初我想知道从textarea中删除

cols

属性是否合适，但这似乎不是最佳的解决方案，而且还需要我深入研究不应该（尚未）触及的遗留代码。

您知道什么是

表布局：修复的
解决方案吗

<div class="container">
    <table class="sub-container">
        <tr>
            <td class="padding-10">
                <textarea  cols="" rows="20" placeholder="Please don't outgrow the container!"></textarea>
            </td>
        </tr>
    </table>
</div>

.container {
    border:2px solid orange;
    width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
    padding: 10px; // added for clarity
}
.sub-container {
    border: 1px solid green;
    table-layout: fixed;
    width: 100%;
}
textarea {
    max-width: 100%; // should limit the default width provided by cols?
    margin: 0; // added for clarity
    border:1px dashed red;
    resize: vertical; // resize only vertical
    width: 96%; // width hack for ur solution
}
.padding-10{
    padding: 10px;
}


.集装箱{
边框：2倍纯色橙色；
宽度：200px；//显式设置为演示，但实际上我使用的是定义了flex基值的flexbox，显示的效果相同
填充：10px；//为清晰起见添加
}
.分箱{
边框：1px纯绿色；
表布局：固定；
宽度：100%；
}
文本区{
最大宽度：100%；//是否应限制cols提供的默认宽度？
边距：0；//为清晰起见添加了边距
边框：1px红色虚线；
调整大小：垂直；//仅调整垂直大小
宽度：96%；//解决方案的宽度破解
}
.1-10{
填充：10px；
}

我在css中做了一些更改，并从textarea重置了COL

更新的codepen也注意到了，但是我不想为了这个而去钻研CSS之外的代码-所以删除
cols
并不理想。即使你保持你的cols是应该工作的，我已经在我的codepen中测试过了，试试吧。你也没有注意到我不想明确声明一个宽度，“你的解决方案的宽度黑客”-是的，不。
<div class="container">
    <table class="sub-container">
        <tr>
            <td>
                <textarea cols="80" rows="20" placeholder="Please don't outgrow the container!"></textarea>
            </td>
        </tr>
    </table>
</div>

.container {
    border:2px solid orange;
    width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
    padding: 10px; // added for clarity
}
.sub-container {
    border: 1px solid green;
}
textarea {
    max-width: 100%; // should limit the default width provided by cols?
    margin: 10px; // added for clarity
    border:1px dashed red;
}

<div class="container">
    <table class="sub-container">
        <tr>
            <td class="padding-10">
                <textarea  cols="" rows="20" placeholder="Please don't outgrow the container!"></textarea>
            </td>
        </tr>
    </table>
</div>

.container {
    border:2px solid orange;
    width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
    padding: 10px; // added for clarity
}
.sub-container {
    border: 1px solid green;
    table-layout: fixed;
    width: 100%;
}
textarea {
    max-width: 100%; // should limit the default width provided by cols?
    margin: 0; // added for clarity
    border:1px dashed red;
    resize: vertical; // resize only vertical
    width: 96%; // width hack for ur solution
}
.padding-10{
    padding: 10px;
}