CSS如何让textarea垂直可调整大小：默认340px高且最高占视口70%

• 三层链式高度约束直接锁死resize的可调整空间：#statements、#entryform、textarea的样式形成了全链路100%高度绑定，等于每一层的高度都被钉死在上一层的总高度上。#entryform设置了height: 100%，直接占满父级#statements的全部可用垂直空间，一点余量都没留；textarea自身的max-height: 100%是相对于#entryform的高度计算的，最大高度和父容器完全相等。这时候拖拽resize手柄想把textarea拉高，超出父容器的部分会被#statements上设置的overflow: hidden直接裁掉，视觉上完全没有高度变化，自然会觉得resize功能完全失效。
• 缺少明确的340px默认初始高度：当前textarea的初始高度由浏览器默认的rows=2属性决定，远低于预期的340px初始值。
• 高度参考逻辑错配：预期最大高度为浏览器窗口的70%，但现有代码的max-height全是相对于父容器计算的，不是相对于视口高度，布局偏移时很容易出现约束失效。
• 冗余裁剪规则干扰：#statements上的overflow: hidden会把拖拽调整时超出容器边界的部分直接隐藏，进一步放大了“resize失效”的观感。

在保留原有视觉样式不变的前提下，只修改阻碍功能的属性，调整后的核心代码如下：

#statements {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 0px;
    max-height: 70vh; /* 直接用视口单位绑定70%窗口高度，不需要绕父级计算 */
    background-color: rgba(255, 255, 255, 0);
    max-width: 340px;
    padding-left: 50px;
    z-index: 10;
    overflow: visible; /* 移除原来的overflow:hidden，避免裁剪resize的溢出内容 */
}

#entryform {
    position: relative;
    background-color: var(--entry-form-background);
    width: 340px;
    border-radius: 8px;
    border-top-left-radius: 0px!important;
    padding-top: 10px;
    min-height: 100%; /* 把原来的height:100%改成min-height，允许容器跟着内容高度自然拓展 */
    padding-bottom: 20px;
    padding-left: 10px;
    margin-left: -10px;
    margin-bottom: 0px;
    z-index: 10!important;
    display: block;
}

textarea {
    font: 16px 'IstokWeb-Bold',sans-serif;
    position: relative;
    resize: vertical;
    width: 92%;
    height: 340px; /* 补全预期的340px默认高度 */
    /* 把原来的max-height:100%改成视口单位，预留提交按钮的高度冗余，避免超出70%窗口的约束 */
    max-height: calc(70vh - 60px);
    overflow: auto;
    vertical-align: top;
    padding: 0.5em 0.6em;
    display: block;
    margin: 0.25em 0;
    border: 1px solid #e6e6e6;
    box-shadow: inset 0 1px 3px #e6e6e6;
    border-radius: 6px;
    -webkit-transition: 0.3s linear border;
    -moz-transition: 0.3s linear border;
    -ms-transition: 0.3s linear border;
    -o-transition: 0.3s linear border;
    transition: 0.3s linear border;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    z-index: 10;
}

• 页面加载完成后，textarea默认保持340px高度
• 可通过右下角的resize手柄垂直拖拽调整高度，最小不会低于340px的初始值
• 调整高度时会自动触发最大高度约束，最高不会超过浏览器窗口高度的70%，不会超出可视范围
• 输入大量长文本时，textarea会在约束高度内自动显示滚动条，不需要手动调整大小也能查看全部内容

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