我的意思是textarea 根据数据的大小自动调整宽度和高度

抱歉，我之前理解错了你的意思。要使textarea根据内容自动调整宽度和高度，你可以使用JavaScript来动态调整textarea的大小。

首先，在HTML模板中将textarea的rows和cols属性移除，添加一个唯一的id属性，例如`id="yaml-textarea"`：

<textarea id="yaml-textarea" name="yaml_data" style="resize: both;">{{ yaml_data }}</textarea>

然后，在HTML模板的底部添加以下JavaScript代码：

<script>
    const textarea = document.getElementById('yaml-textarea');
    
    textarea.addEventListener('input', function() {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    });
</script>

这段JavaScript代码将监听textarea的输入事件，每次输入时都会重新计算textarea的高度，并根据内容自动调整。

这样，当你输入内容时，textarea的高度将根据内容的多少自动调整。宽度会自动适应父容器的宽度。

相关问题

CSS - 控制 textarea 自动调整大小

要实现 textarea 元素的自动调整大小，可以使用 CSS 的 `resize` 属性和 `overflow` 属性的组合。

首先，将 `resize` 属性设置为 `none`，以禁止用户手动调整 textarea 的大小。然后，将 `overflow` 属性设置为 `auto` 或 `hidden`，以控制 textarea 内容超出其可见区域时的显示方式。

下面是一个示例：

textarea {
  resize: none;
  overflow: auto;
}

这样设置后，当 textarea 内容超出其可见区域时，会自动显示滚动条。用户可以通过滚动条来查看整个内容，并且 textarea 的大小不会自动调整。

如果希望 textarea 根据内容自动调整大小，目前没有纯 CSS 的解决方案。通常需要使用 JavaScript 或其他库来实现这样的自动调整效果。

textarea高度自动撑开

可以使用以下代码来实现`textarea`的高度自动撑开：

textarea {
  overflow: hidden; /* 隐藏滚动条 */
  resize: none; /* 禁止拖拽调整大小 */
  height: auto; /* 高度自动撑开 */
  min-height: 50px; /* 最小高度 */
}

其中`min-height`属性可以设置`textarea`的最小高度，当内容较少时，`textarea`的高度也不会太小。而`height`属性设置为`auto`时，`textarea`的高度会根据内容自动撑开。

需要注意的是，当`textarea`中存在多行文本时，若其中一行文本太长，会自动换行，造成高度计算不准确的问题。因此建议使用JavaScript来实现更为精确的自适应高度。可以参考第三方库如：autosize.js。