使用spectre.css框架时，Flexbox添加label导致元素重叠的问题

我用Spectre.css框架构建了一个两列textarea的"hat"布局，要求屏幕宽度小于600px时两列堆叠。不加label时布局正常，但添加label后，textarea会从列底部溢出并重叠——label没有被计入列的尺寸计算中，请问怎么修复？

现有代码 #

CSS代码 #

*, ::before, ::after {
  box-sizing: border-box;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: .4rem;
  padding-right: .4rem;
  width: 100%;
}

.columns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -.4rem;
  margin-right: -.4rem;
}

.column {
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  padding: .25rem;
}

.col-12,
.col-11,
.col-10,
.col-9,
.col-6 {
   -ms-flex: none;
    flex: none;
}

.col-12 {
  width: 100%;
}

.col-10 {
  width: 83.33333333%;
}

.col-9 {
  width: 75%;
}

.col-6 {
  width: 50%;
}

@media (max-width: 600px) {
  #hattop {
    height: 35vh;
  }
  
  .column.col-sm-12,
  .column.col-sm-11 {
   -ms-flex: none;
    flex: none;
  }
  
 .col-sm-12 {
    width: 100%;
  }
  
  .col-sm-11 {
    width: 91.66666667%;
  }
}

.col-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.col-ml-auto {
  margin-left: auto;
}

.col-mr-auto {
  margin-right: auto;
}

.form-label {
  color: #fff;
}

.form-input {
  appearance: none;
  background: #fff;
  border: .05rem solid #5755d9;
  border-radius: 10px;
  color: #3b4351;
  max-width: 100%;
  padding: .25rem .4rem;
  position: relative;
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  width: 100%;
  word-wrap: anywhere;
}

textarea {
  overflow: auto;
  resize: none;
}

textarea.form-input {
  height: 100%;
  width: 100%;
}

#hattop {
  background-color: rgb(31, 26, 44);
  padding: 1rem .5rem;
  height: 50vh;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

@media (max-width: 600px) {
  #hattop {
    height: 35vh;
  }
}

HTML代码 #

<div class="container">
    <div class="columns col-sm-11 col-10 col-mx-auto">
        <div id="hattop" class="columns col-9 col-mx-auto">
            <div class="column col-sm-12 col-6 col-ml-auto">
                <label for="names" class="form-label">Enter names separated by line</label>
                <textarea class="form-input" id="names" placeholder="Names"></textarea>
            </div>
            <div class="column col-sm-12 col-6 col-mr-auto">
                <label for="tasks" class="form-label">Enter tasks separated by line</label>
                <textarea class="form-input" id="tasks" placeholder="Tasks"></textarea>
            </div>
        </div>
    </div>
</div>

修复方案 #

问题根源是：你给textarea设置了height:100%，但父元素.column没有明确的高度约束，且label会占据一部分垂直空间——textarea的100%高度是相对于父元素的内容高度，导致它会超出容器。

调整以下CSS规则即可解决：

1. 给包含label和textarea的.column设置垂直方向的flex布局，让子元素自动分配空间：

.column {
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  padding: .25rem;
  /* 添加以下两行 */
  display: flex;
  flex-direction: column;
}

2. 修改textarea的样式，去掉固定的height:100%，改用flex:1让它填充label剩余的空间：

textarea.form-input {
  /* 去掉 height: 100%; */
  width: 100%;
  /* 添加这一行 */
  flex: 1;
}

这样调整后，每个列会自动把垂直空间分配给label和textarea，textarea会占满label下方的剩余区域，不会再溢出容器，同时保持响应式堆叠的效果。

内容的提问来源于stack exchange，提问作者pieartsy