Для реализации изменения размеров div в зависимости от доступного пространства можно использовать различные подходы.
1. Использование CSS Flexbox:
Можно задать основному контейнеру (например, div с классом "main-container") свойство display: flex; и установить нужные размеры дочерним элементам (например, div с классом "sidebar") с помощью свойств flex-basis, flex-grow и flex-shrink. Например:
```
.main-container {
display: flex;
}
.sidebar {
flex-basis: 20%; /* задаем начальный размер */
flex-grow: 1; /* указываем, что элемент может увеличиваться */
flex-shrink: 1; /* указываем, что элемент может уменьшаться */
}
```
2. Использование CSS Grid:
Можно задать основному контейнеру (например, div с классом "main-container") свойство display: grid; и установить нужные размеры дочерним элементам (например, div с классом "sidebar") с помощью свойств grid-template-columns и grid-template-rows. Например:
```
.main-container {
display: grid;
grid-template-columns: 20% auto; /* первая колонка занимает 20% доступной ширины, вторая занимает оставшуюся ширину */
}
```
Что касается второй части вашего вопроса про конструкцию `<div class="main-container"> <div class="sidebar">`, то это пример разметки с двумя div элементами, где `main-container` является основным контейнером, а `sidebar` - элементом сайдбара или боковой панели. Это может быть использовано для создания макета веб-страницы, где `sidebar` будет содержать дополнительную информацию, меню или другие компоненты, а `main-container` будет содержать основное содержимое страницы.