How to stretch an empty block to the height of an adjacent filled with content?

Question

css

Actually - here is a sandbox with an example
. There are two blocks, one is empty, it has a picture / color on the background, the second is next to the content, how to make the empty block stretch by the size of the block with the content? Wrapped block in a container with display: flex

Answer 1

remove the empty block height: 100%;
and instead of width 30% it's better to use flex: 0 0 30% or whatever

Answer 2

.wrap {
  /* Не обязательно задавать, так как значение по умолчанию */
  align-items: stretch;
}

/* Убрать height: 100% */
.left {
  flex-shrink: 1;
  width: 30%;
  background-color: green;
}