ElementPlus input.textarea高度撑满盒子？

<template>
    <div class="container">
        <div>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>批量生成update文件</span>
                        <el-button class="button" @click="add">生成</el-button>
                    </div>
                </template>
                <div>
                    <el-input v-model="dir.dir" placeholder="请输入路径" />
                    <el-input v-model="dir.content" placeholder="请输入update文件内容" />
                </div>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>修改宝塔密码</span>
                    </div>
                </template>
                <div>
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
                        <el-form-item label="IP地址" prop="host">
                            <el-input v-model="ruleForm.host" />
                        </el-form-item>
                        <el-form-item label="端口" prop="port">
                            <el-input v-model="ruleForm.port" />
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="ruleForm.username" />
                        </el-form-item>
                        <el-form-item label="服务器密码" prop="password">
                            <el-input v-model="ruleForm.password" />
                        </el-form-item>
                        <el-form-item label="宝塔密码" prop="btPassword">
                            <el-input v-model="ruleForm.btPassword" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                修改宝塔密码
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>批量生成aaa.css文件</span>
                    <el-button class="button" @click="addCssFile">生成</el-button>
                </div>
            </template>
            <div class="dirCSS-div">
                <el-input class="dirCSS-div-el-input1" v-model="dirCss.dir" placeholder="请输入路径" />
                <el-input class="dirCSS-div-el-input2" :rows="6" v-model="dirCss.content" type="textarea" placeholder="请输入aaa.css文件内容" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="batch">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'


import { getCatalogue, addCssFileContent } from '@/api/batch'
import { changeBtpassword } from '@/api/bt.js'

const dir = reactive({
    dir: 'C:/Users/Administrator/Desktop/OnlineWebsite',
    content: '\\pc\\view_article.htm',
})
const add = () => {
    getCatalogue(dir)
}

const dirCss = reactive({
    dir: 'C:/Users/Administrator/Desktop/OnlineWebsite',
    content: '\\pc\\view_article.htm',
})
const addCssFile = () => {
    addCssFileContent(dirCss)
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    host: '',
    port: '22',
    username: 'root',
    password: '',
    btPassword: '',
})
const rules = reactive<FormRules>({
    host: [
        { required: true, message: '请输入IP', trigger: 'blur' },
    ],
    port: [
        { required: true, message: '请输入端口', trigger: 'blur' },
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    btPassword: [
        { required: true, message: '请输入宝塔密码', trigger: 'blur' },
    ],
})
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            changeBtpassword(ruleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}


</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}

.container {
    display: flex;

    .dirCSS-div {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}
</style>