当父对象具有最大高度和溢出滚动时，Textarea不会拉伸

基础概念

在CSS布局中，当父元素设置了最大高度（max-height）并且具有溢出滚动（overflow: auto 或 overflow: scroll）时，子元素（如<textarea>）的行为可能会受到限制。<textarea>元素通常会根据内容自动调整大小，但在某些情况下，它可能不会按预期拉伸。

类型

固定高度：父元素设置固定高度。
最大高度：父元素设置最大高度，允许内容在一定范围内扩展。
溢出滚动：父元素设置溢出滚动属性，以便在内容超出容器时可以滚动查看。

应用场景

这种布局常见于需要显示大量文本信息的页面，如聊天窗口、代码编辑器、评论区等。

问题原因

当父元素设置了最大高度并且具有溢出滚动属性时，<textarea>可能无法正确地根据内容调整大小，因为父元素的高度限制了<textarea>的扩展。

解决方法

方法一：使用JavaScript动态调整`<textarea>`高度

可以通过JavaScript监听<textarea>的内容变化，动态调整其高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Auto Resize</title>
    <style>
        .container {
            max-height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <textarea id="myTextarea" oninput="autoResize(this)"></textarea>
    </div>

    <script>
        function autoResize(textarea) {
            textarea.style.height = 'auto'; // Reset height to auto
            textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
        }
    </script>
</body>
</html>

方法二：使用CSS Flexbox布局

通过Flexbox布局，可以让<textarea>自动填充父容器的可用空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Auto Resize</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            max-height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .content {
            flex-grow: 1;
            overflow: auto;
        }
        textarea {
            width: 100%;
            resize: none; /* Prevent manual resize */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content"></div>
        <textarea id="myTextarea" oninput="autoResize(this)"></textarea>
    </div>

    <script>
        function autoResize(textarea) {
            textarea.style.height = 'auto'; // Reset height to auto
            textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
        }
    </script>
</body>
</html>