Html 设置文本区域包装的最大宽度与相对元素重叠

这里有一个包装器div和两个子div元素。
包装器div的最大宽度为500px，子div的文本区域允许调整大小。
当我调整大小时，相对元素按钮会重叠。
有人能解释一下发生了什么以及如何修复它吗？ 调整大小是否允许超出最大宽度

HTML

<div class="wrapper">
    <div class="text-area-element">
         <textarea></textarea>
    </div>
    <div>
        <button>
        BUTTON
        </button>
    </div>
</div>

---

max width

约束需要应用于textarea，而不是div元素

.wrapper{
最大宽度：500px；
显示器：flex；
}
.文本区域元素{
宽度：250px；
}
.text区域元素text区域{
最大宽度：100%；
框大小：边框框；
}

按钮

需要将

最大宽度

约束应用于textarea，而不是div元素

.wrapper{
最大宽度：500px；
显示器：flex；
}
.文本区域元素{
宽度：250px；
}
.text区域元素text区域{
最大宽度：100%；
框大小：边框框；
}

按钮

.wrapper {
    max-width: 500px;
    display: flex;
}

.text-area-element {
    min-width: 250px;
    max-width: 250px;
}