Для выполнения растяжения соседнего блока так, чтобы он оставался параллельным основному блоку, можно использовать свойство CSS `flex-grow: 1;` для обоих блоков. Это позволит распределить свободное пространство между блоками равномерно, при этом они будут оставаться параллельными.
Для настройки растягивания блока с подкатегориями по размеру с блоком категорий во время навигации с выпадающими подкатегориями в вашем примере на Codepen, можно установить `flex-grow: 1;` для блока `.categories` и убрать `flex-direction: column;`. Это позволит подкатегориям занимать доступное свободное пространство по вертикали рядом с категориями.
Вот пример исправленного CSS для вашего кода на Codepen:
```css
.navigation {
display: flex;
justify-content: space-between;
}
.categories {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.subcategories {
display: none;
position: absolute;
background: lightgray;
width: 100px;
z-index: 1;
}
.categories:hover .subcategories {
display: flex;
flex-direction: column;
}
.category,
.subcategory {
padding: 10px;
}
ul {
list-style-type: none;
}
li {
cursor: pointer;
}
```
Этот код позволит блоку с подкатегориями автоматически выравниваться по размеру с блоком категорий при наведении на категорию.