列卡溢出答案

【问题标题】：Card overflow from column列卡溢出
【发布时间】：2023-03-16 15:37:01
【问题描述】：

我有一张包含表格的卡片。我决定插入一个 y 滚动条，而不是让表单进入页面，这样我就可以确定用户一次可以看到多少表单。问题是，看起来列从卡中溢出。

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px;
  background-color: white;
  border-radius: 1%;
  width: 115%;
  margin-left: -9%;
  max-height: 42%;    
}
    
.column {
  float: left;
  background-color: white;
  margin-left: -15%;
  margin-right: 175%;
  margin-top: -5%;
}
    
.column2 {
  float: left;
  background-color: white;
  margin-left: -200%;
  margin-right: -1%;
  margin-top: -8%;
  width: 100%;
  border-left: 1px solid #E1E0E5    
}
    
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
    
.scroll-box {
  overflow-y: scroll;
  height: 40%;
  padding: 1rem;
}

<div class="card">
  <div class="row">
    <div class="column"></div>
    <div class="column2">
      <div class="scroll-box">
        <form #f="ngForm" novalidate>
          <!-- steps of the form -->
          <button type="submit" (click)="save(f.value, f.valid)">Submit</button>
      </form>
      </div>
    </div>
  </div>
</div>

如何保持列高与其所在的卡相同，并且不会溢出卡？

我目前看到的：

【问题讨论】：

标签： css angular col

【解决方案1】：

要获得正确的列高，请尝试使用 flexbox：

.card {
  display: flex;
}

为防止溢出，请使用overflow 或overflow-y 属性，例如：

.column2 {
  overflow-y: scroll;
}

或者也许（取决于你在做什么）：

.card {
  overflow-y: hidden;
}

【讨论】：