Подгоните ячейку таблицы к div внутри нее с помощью flexbox ⇐ CSS

[Anonymous]

Я создал на своей веб-странице «календарь расписания», который должен отображать существующие встречи в соответствии с данными, предоставленными в модели с внутренней стороны:

Код: Выделить всё

Mon
Tue
Wed
Thu
Fri
Sat
Sun








th:if="${appointment.date.toLocalDate().isEqual(day.toLocalDate())}"
th:text="|${appointment.date.toLocalTime().toString()} - ${appointment.title}|">

таблица стилей:

Код: Выделить всё

.calendar {
border-collapse: separate;
}

.calendar th, .calendar td {
text-align: center;
width: 100%;
}

.calendar-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: stretch;
}

.empty-day-cell {
position: relative;
min-width: 80px;
min-height: 80px;
}

.day-cell {
border: 1px solid #000000;
border-radius: 5px;
position: relative;
min-width: 80px;
min-height: 80px;
padding-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: stretch;
}

.day-number {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}

.appointment {
width: fit-content;
margin: 0 10%;
margin-bottom: 0.5rem;
white-space: nowrap;
border: 1px solid #000000;
border-radius: 10px;
color: black;
background: teal;
padding: 0 10%;
}

и результат выглядит следующим образом (вставка изображения, а не ссылки jsfiddle, поскольку все теги Thymeleaf не будут работать без внутренних данных):
РЕДАКТИРОВАТЬ: также ссылка: https://jsfiddle.net/zax3fq7c/


К сожалению, ячейки, похоже, не помогают мне изменять свой размер в соответствии с размером «встреч»...
Скорее всего, я напутал с флексбоксами, хотя считал, что понимаю концепцию, когда создание этого макета. Здесь возникает несколько вопросов:

• Как заставить ячейки изменять размер, чтобы задачи содержались в одной ячейке, а не накладывались друг на друга, как на изображении?
  Как сделать так, чтобы несколько встреч, как показано на 22-м, имели такой же размер коробки, как и самая длинная?
• (косметическая и не очень важная) 1-я и 2-я коробки немного шире, чем в следующих рядах, я не могу найти причину этого, может кто-нибудь объяснить мне это? Я предполагаю, что это связано с отсутствием границы в «пустой-дневной ячейке», но установка прозрачной границы в 1 пиксель на самом деле ничего не меняет.

Подробнее здесь: https://stackoverflow.com/questions/784 ... th-flexbox