Чтобы сделать так, чтобы все колонки занимали всю ширину контейнера, вы можете использовать свойство "flex-grow" для класса "col". Например, если вы хотите, чтобы первая колонка была больше, вы можете установить flex-grow для первого блока как 2, а для остальных колонок как 1.
Чтобы ширина первого блока не менялась при изменении размера h1, вы можете использовать свойство "min-width" для первого блока. Это гарантирует, что ширина блока не будет меньше указанного значения.
.col {
flex-grow: 1;
}
.col:first-child {
flex-grow: 2;
min-width: 200px;
}
Это пример свойства которое вы можете использовать. Значения могут менятся в зависимости от ваших потребностей.
