卡从列溢出

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何将色谱柱高度保持为卡片的高度，并且卡片没有溢出？

我目前看到的是：

Answer 1

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

.card {
  display: flex;
}

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

.column2 {
  overflow-y: scroll;
}

或者也许（取决于你的行为）：

.card {
  overflow-y: hidden;
}