css - 使 div 在 flexbox 中可滚动并将 textarea 的大小调整为空间

Question

您好，我有一个带有三个孩子的 Flexbox 容器。第一个有一个textarea类似的指示。但是textarea，子元素的 超过了父元素。它只应该在子元素的父元素内。

其次，我想让内容在孩子 2 和 3 中可滚动。许多小时的搜索无法给我任何解决方案。

你是否有一个？

提前感谢您提供有用的答案。

.flex-rows {
  display: flex;
  flex-direction: column;
}

.flex--1 {
  flex: 1 1 auto;
}

.parent {
  height: 250px;
  width: 100%;
}

.child1,
.child2,
.child3 {
  float: left;
  display: inline-block;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.child1 {
  background-color: blue;
  width: calc(100% - 253px);
}

.child1>*,
.child1>*>* {
  width: 100%;
  display: block;
  height: 100%;
}

.child2 {
  background-color: green;
  width: 100px;
}

.child3 {
  background-color: red;
  width: 150px;
}

<div class="parent flex-rows">
  <div>
    <button class="button button1">10px 24px</button>
    <button class="button button2">12px 28px</button>
  </div>
  <div class="flex--1">
    <div class="child1">
      <div><textarea></textarea></div>
    </div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

标签： css

Answer 1

为了使内容.child2可.child3滚动，您需要在每个元素上设置高度height: 250px;和。overflow-y: scroll;

此外，您textarea超出了父级，因为它的填充给了它一些额外的高度。设置box-sizing: border-box;为.child3 textarea使填充包含在元素的高度中。请参阅：https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

.flex-rows {
  display: flex;
  flex-direction: column;
}

.flex--1 {
  flex: 1 1 auto;
}

.parent {
  height: 250px;
  width: 100%;
}

.child1,
.child2,
.child3 {
  float: left;
  display: inline-block;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.child1 {
  background-color: blue;
  width: calc(100% - 253px);
}

.child1>*,
.child1>*>* {
  width: 100%;
  display: block;
  height: 100%;
}

.child2 {
  background-color: green;
  width: 100px;
}

.child3 {
  background-color: red;
  width: 150px;
}

.child2, .child3 {
  height: 250px;
  overflow-y: scroll;
}

.child1 textarea {
  box-sizing: border-box;
}

<div class="parent flex-rows">
  <div>
    <button class="button button1">10px 24px</button>
    <button class="button button2">12px 28px</button>
  </div>
  <div class="flex--1">
    <div class="child1">
      <div><textarea></textarea></div>
    </div>
    <div class="child2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
    <div class="child3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
  </div>
</div>