Flexbox image and text size are not same

Question

I am trying to make flexboxes with the same height and width by using:

flex: 1;

But it is not working as I thought, image box becomes bigger than text box.

Here I made little example: https://jsfiddle.net/p3uowcdg/9/

Answer 1

You should use grid layout:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.box-image {
  width: 100%;
}

.box-text {
  width: 100%;
}

Result