Css 最小高度将内容推到div外部，而不是在div内部增长

我创建了一个简单的待办应用程序。我正在为每个待办事项创建div，并为div设置最小高度，以防内容增长大于div，但即使设置了div的最小高度，内容也会增长到div之外。有人能指出我缺少什么吗？我已经附上了输出的屏幕截图

App.css
身体{
背景色：rgb（238174174）；
}
.App{
边框：1px实心；
边界半径：20px；
最小高度：200px；
宽度：30%；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
Todo.css
托多先生{
边框：1px纯黑；
利润率：10px；
宽度：300px；
高度：50px；
最小高度：50px；
左侧填充：9px；
填充底部：9px；
}

Todo.js
从“React”导入React；
导入“/Todo.css”
常量Todo=（{title，description}）=>{
返回(
{title}

)
}
导出默认待办事项
App.js
从“React”导入React，{useState}；
从“/Todo”导入Todo；
导入“/App.css”；
函数App（）{
const[todos，setTodos]=useState（[]）//todos=>要存储该值，setTodos=>要更新状态
常量[input，setInput]=useState（“”）
常量handleSubmit=（e）=>{
e、 预防默认值（）；
setTodos（[…todos，输入]）
setInput（“”）
}
返回(
待办应用
setInput（e.target.value）}value={input}/>
添加待办事项
{
todos.map（todo=>{
返回
})
}
);
}
导出默认应用程序您需要从Todo.css（Todo类）中删除高度，只保留最小高度

.Todo {
    border: 1px solid black;
    margin: 10px;
    width: 300px;
    min-height: 50px;  
    padding-left: 9px;
    padding-bottom: 9px;
}

尝试此操作-丢失
min height
更改
height:auto

.Todo {
  border: 1px solid black;
  margin: 10px;
  width: 300px;
  height: auto;
  padding-left: 9px;
  padding-bottom: 9px;
}

您的意思是设置最大高度而不是最小高度吗？另外，如果输入变得太长，您希望发生什么？如屏幕截图所示，输入超出了div。div不会随着输入的增长而增长，相反，我推断的是。你给了我一个高度。你的意思是给它高度：自动，所以它增长，我不清楚这是否是CSS在这一点上使用。