文本区域包装的样式最大宽度与相对元素重叠答案

【问题标题】：Styling max-width for text area wrapper overlap the relative element文本区域包装的样式最大宽度与相对元素重叠
【发布时间】：2020-09-08 19:10:05
【问题描述】：

这里我有一个包装 div 和两个子 div 元素。
Wrapper div 的最大宽度为 500px，子 div 的 textarea 允许调整大小。
当我调整大小时，相对元素按钮会重叠。
有人可以解释发生了什么以及如何解决吗？是否允许调整大小超过 max-width ？

JSFIDDLE

HTML

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

CSS

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

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

【问题讨论】：

标签： html css

【解决方案1】：

max-width 约束需要应用于 textarea 而不是 div 元素

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

.text-area-element {
  width: 250px;
}
.text-area-element textarea {
  max-width:100%;
  box-sizing:border-box;
}

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

【讨论】：