Html 影响css样式的表单标记

我在css方面相当糟糕，只能靠这么多的答案来解决问题——但是我找不到任何关于这个具体问题的解释

我有一个表单，其中有一个

文本区域

和一个

按钮

（

输入/提交

），没有其他内容，我正试图让

文本区域

填充所有屏幕，除了屏幕底部按钮占用的30px外，因此它看起来像这样：

<div class="box">
    <form action="./save.php" method="post">
        <div class="row content">
            <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
        </div>
        <div class="row footer">
            <input type="submit" value="Save Changes." class="btn1">
        </div>
    </form>
</div>

我正试图使用flex实现这一点，如中所述

我的身体现在看起来像这样：

<div class="box">
    <form action="./save.php" method="post">
        <div class="row content">
            <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
        </div>
        <div class="row footer">
            <input type="submit" value="Save Changes." class="btn1">
        </div>
    </form>
</div>

它不起作用，这取决于

表单的样式

它要么填充了一小部分页面，要么两个元素都占据了整个页面

但是，当我从html中完全删除

表单

标记时，一切都会自行修复，它的显示和行为完全符合我的预期。

我尝试过将

表单

标记的样式设置为与

html、body

相同，也尝试过将其设置为

隐藏

，显示为

块

和

内联块

等。然而，我似乎无法让它不影响任何内容

---

有什么方法可以使

表单

标记完全不影响样式吗？

表单标记必须是flex容器，而不是

.box

DIV（

.box

的唯一子元素是

表单

元素，因此没有意义）：

html，
身体{
身高：100%；
保证金：0；
}
.盒子{
身高：100%；
}
形式{
显示器：flex；
柔性流动：柱；
身高：100%；
宽度：100%；
}
.行标题{
flex:0自动；
}
.row.content{
flex:1自动；
}
.row.footer{
柔性：0 30像素；
}
.btn1，
.box1{
宽度：100%；
身高：100%；
}
.btn1{
背景：红色；
}
.box1{
背景：绿色；
}

文本

这非常有效，非常感谢-我知道这很简单：）