Почему мой правый гибкий столбец внезапно падает ниже левого столбца при добавлении (жидкого) содержимого?
Мне нужен левый столбец фиксированной ширины и правый столбец, содержащий ползунок изображения ( Сова Карусель ).
Расположение столбца работает нормально, когда оно пустое, но как только я добавляю ползунок изображения, столбец переходит на 100% ширину и опускается ниже фиксированного столбца. Это странно, поскольку слайдер отзывчив и не должен расширяться за пределы контейнера - он не имеет фиксированной ширины.
Пожалуйста, см. Этот код: https://codepen.io/nick-gilbert/pen/wORaOP
Моя основная структура столбцов очень проста:
<div class="row">
<div class="col search-sidebar">
left
</div>
<div class="col">
right
</div>
</div>
CSS:
.search-sidebar: {
flex: 0 0 260px;
}
Вот изображение, показывающее проблему (но лучше посмотреть на коде):