时间戳

首页 > 解决方案 > 文本区域包装的样式最大宽度与相对元素重叠

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

问题描述

在这里，我有一个包装器 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;
}

标签： htmlcss

解决方案

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>

推荐阅读