Переполнение карты из столбца

Question

У меня есть карточка с формой. Вместо того, чтобы форма шла вниз по странице, я решил вставить полосу прокрутки 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>

Как сохранить высоту столбца в той карточке, в которой он находится, и не допустить переполнения карточки?

То, что я сейчас вижу:

Answer 1

Чтобы получить правильную высоту столбцов, попробуйте использовать flexbox:

.card {
  display: flex;
}

Для предотвращения переполнения используйте свойства overflow или overflow-y, например:

.column2 {
  overflow-y: scroll;
}

Или, может быть (в зависимости от того, что вы делаете):

.card {
  overflow-y: hidden;
}