У меня есть flexbox, содержащий элементы, которые имеют фиксированную ширину flex-basis, и которые не позволяют увеличиваться или уменьшаться. Элементы в совокупности шире, чем ширина экрана. Они отображаются нормально, потому что они переполняются в overflow: visible пространстве своих контейнеров.
Но это плохо взаимодействует с элементом display: sticky; Я хочу, чтобы при прокрутке над флексбоксом висел липкий элемент.
Что я вижу, так это то, что липкий элемент зависает, пока вы не прокрутите одну ширину экрана, а затем исчезает.
Похоже, это связано с тем, что ширина контейнера с display: flex не увеличивается, чтобы вместить его дочерние элементы (и, соответственно, не изменяется и тело).
Как заставить контейнер установить ширину, равную совокупной ширине его дочерних элементов flex?
Если я запускаю этот javascript:
document.querySelector(".container").style.width = document.body.scrollWidth + 'px'
(или эквивалентно этому javascript):
document.body.style.width = document.body.scrollWidth + 'px'
все работает так, как мне хочется, но в идеале я бы хотел использовать решение на чистом CSS, а не запускать javascript для увеличения размеров до контейнеров.
Пример codepen: https://codepen.io/anon/pen/KjmQRz
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="stickybar">Sticky</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
height: 400px;
}
.stickybar {
position: sticky;
left: 0px;
z-index: 10;
margin-right: 5px;
background-color: red;
}
.column {
margin-right: 5px;
flex: 0 0 150px;
border: 1px solid black;
}