Как заставить div занимать 100% внутри другого div в Vue

Question

Я хочу сделать два div внутри другого div. Но второй (зеленый) div передает размер основного (черного). Я попытался установить высоту на 100%, но что-то выходит за рамки основного блока, есть ли у кого-нибудь решения?

.block {
  width: 300px;
  height: 200px;
  background: black;
}

.box1 {
  width: 200px;
  height: 50px;
  background: red;
  vertical-align: top;
  margin: auto;
}

.box2 {
  width: 200px;
  height: 100%;
  background: green;
  margin: auto
}

<div class="block">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

Answer 1

Если вы установите рост ребенка на 100%, тогда высота родителя будет наследоваться. Если вы ищете вариант, в котором 2-я ячейка (зеленая) заполняет оставшееся пространство до 1-й ячейки (красная)

.block {
  width: 300px;
  height: 200px;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box1 {
  width: 200px;
  height: 50px;
  background: red;
  vertical-align: top;
}

.box2 {
  flex: 1;
  width: 200px;
  background: green;
}

<div class="block">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

Я использую Flex и нет необходимости использовать overflow: hidden

Answer 2

Вы должны добавить overflow: hidden; к основному черному ящику, как показано ниже. Это сделает переполнение срезанным.

.block {
  width: 300px;
  height: 200px;
  background: black;
  overflow: hidden;
}

.box1 {
  width: 200px;
  height: 50px;
  background: red;
  margin: auto;
}

.box2 {
  width: 200px;
  height: 100%;
  background: green;
  margin: auto;
}

<div class="block">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

Но если вы не хотите избавляться от оставшейся части второй коробки, вы можете сделать это и с помощью flexbox. Это не обрезает зеленое поле, но вместо этого оно изменит его размер, чтобы зеленый ящик остался в родительском черном поле.

.block {
  width: 300px;
  height: 200px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box1 {
  width: 200px;
  height: 50px;
  background: red;
}

.box2 {
  width: 200px;
  height: 100%;
  background: green;
}

<div class="block">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

ПРИМЕЧАНИЕ: В версии flexbox вам также не потребуется использовать margin: auto; в дочерних полях, потому что в Направление столбца flexbox align-items: center; позаботится о дочерних позициях с доступными нам атрибутами.