textarea 高度溢出 parent 容器

Question

我有一个 div，其中包含另一个 child div。其中 child div 是一个 h1 标签和一个 textarea 标签。我希望 h1 标签和 textarea 适合 parent div 的高度，但看起来 textarea 被推出了 parentdiv。

我尝试对 textarea 使用 box-sizing: border-box; 以确保它保持在 parent div 范围内，虽然这适用于宽度，但不适用于高度。

我还可以通过使 textarea 的高度为 parent div 的 87% 来提供临时修复，但是如果我缩小在浏览器中，最终 textarea 会覆盖 parent div。我也尝试将 overflow:hidden 用于包含 div 以防止流血但是我看不到 m textarea.

的底部

理想情况下，我希望 textarea 的高度不会占据 div 未被 h1 标签占据的其余部分。我也不想让 textarea 边框完全覆盖包含 div 的内容，这甚至在我执行 overflow:hidden 时发生，我想避免使用它，因为我想要溢出是 auto 以解决缺少自动换行的问题。

如果您检查代码段，您会看到 textarea 如何从包含的 div 垂直渗出。

编辑

我考虑过使用 flexbox，但我计划让 div 的左右边框可以拖动，我不确定我是否可以在允许 div 的情况下使用 flexbox根据边框拖动轻松调整大小。我不确定这是否可行，但我愿意接受建议！

.container {
  width: 90%;
  display: block;
  margin: auto;
  /*display: inline-block;*/
  border: solid 1px cadetBlue;
  /*grid-template-columns: 300px 300px;*/
}

.topContainer{
  display: flex; 
  margin: auto;
  height: 300px; 
  border-bottom: solid 1px cadetBlue;
}

.innerBox{
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow-y: auto;
  resize: none;
  box-sizing:border-box;
  border: solid 1px cadetBlue;
}

.view{
  width: 100%;
  height: 300px;
  overflow: auto;
}

.box-title{
  width: 100%;
  margin: auto;
  height: 10%;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sectionContainer{
  height: 100%;
  width: 100%;
  position: relative;
}

.sectionContainer.html > div > .innerBox{
  border-left:  solid 0px transparent;
  border-right: solid 0px transparent;
}

.sectionContainer.js > div > .innerBox{
  border-right: solid 0px transparent;
}

.sectionContainer.css > div > .innerBox{
  border-right: solid 0px transparent;
}

.sectionContainer > div{
  width: 100%;
  height: 100%;
}

<div class='container'>
        <div class='topContainer'>
<div class="sectionContainer">
              <div>
              <h2  class="box-title" style='border-left: solid 1px cadetBlue;'>JavaScript</h2>
             <textarea class="innerBox" style="width: 100%;">
        </textarea>
              </div>
          </div>
  </div>
</div>

Answer 1

您可以彻底简化 html 和 css 并使用 flexbox。

.sectionContainer // acts as a flexbox.

.sectionContainer>.box-title{
  flex: 0 0 auto; // title can not grow or shrink and has the regular height
}
.sectionContainer>.innerBox{
  flex: 1 1 auto; // textarea can grow or based on the leftover area
}

我将示例动画化以显示更改 .sectionContainer 宽度或高度具有预期的效果。

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
  width: 100%;
  animation: animateWidth 3s infinite;
  position: relative;
}

.sectionContainer>.box-title{
  flex: 0 0 auto;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.sectionContainer>.innerBox{
  flex: 1 1 auto;
  width: 100%;
  padding: 5px;
  box-sizing:border-box;
}
@keyframes animateWidth {
  0%{
    width: 100%;
  }
  25%{
    width: 50%;
  }
  50% {
    width: 100%;
    height: 300px;
  }
  75% {
    height: 150px;
  }
  100% {
    height: 300px;
  }
}

<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <textarea class="innerBox"></textarea>
</div>

Answer 2

使用 flexbox 但不要将 textarea 设为 flex 项目以避免调整大小时出现问题。考虑将它包裹起来。

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
}

.sectionContainer>.box-title{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sectionContainer>.innerBox{
  flex-shrink:0;
  flex-grow:1;
}
.sectionContainer>.innerBox textarea {
  height:100%;
  width:100%;
  box-sizing:border-box;
}

<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <div class="innerBox"><textarea ></textarea></div>
</div>

textarea 高度溢出 parent 容器

textarea height is overflowing parent container

html

css

textarea