Сергей delphinpro

Занимают ширину пропорционально содержимому

Вот когда имеем дело со строками, то там все нормально - высота контейнера делится между получившимися строками поровну.

вовсе нет. просто у вас все строки одинаковой высоты. Попробуйте в одну из них добавить например <br>

как-то так

flex-wrap: wrap;

Делаем макет из двух колонок и двух столбиков. Картинку размещаем в первой колонке на две строки. Стили для выравнивания - по вкусу, сами.

.el {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}
.img {
  grid-row: span 2;
}
.time {
  text-align: right;
}

задача со звездочкой *

.el {
  position: relative;
}
.cancel {
  position: absolute;
  right: 0;
  top: 0;
}

Это декорации. Разместите их фоном.
В мобильном виде через медиазапрос измените расположение.

для .container установлен min-height:100vh
вот он и становится равным 100vh

И еще 7 часов просидишь. Это как закручивать гвоздь отверткой.
Почему не сделать элегантно на гридах?



UPD

Однако учитывая примечание, что элементы можно распределить по блокам как угодно, то вот:

Ширина 1/3 и jusity-content:center
Зачем всё усложнять?

Для .btn уберите стиль flex: 0 0 100px и добавьте min-width: 100px

так

height:100% у этого дива убери

100% не будет работать, потому что у main тоже 100%, а у его родителя нет высоты. Значит и у main нет высоты, а значит и у дива тоже нет.

Используешь флексы - используй флексы, не надо костылять.

Гриды заюзать