Question

我有一个flexbox，其中包含具有固定宽度flex-basis的元素，并且不允许增长或收缩。元素合计比屏幕宽度宽。它们显示良好，因为它们溢出到了容器的overflow: visible空间中。

但是，这与display: sticky元素交互作用很差；我希望在滚动时将粘性元素悬停在Flexbox上。

我看到的是粘性元素会一直滚动直到您滚动一个屏幕宽度，然后消失。

这似乎是因为带有display: flex的容器的宽度没有增加以容纳其子容器（因此，主体也没有容纳）。

如何强制将容器的宽度设置为其flex子代的累积宽度？

如果我运行此javascript：

document.querySelector(".container").style.width = document.body.scrollWidth + 'px'

（或与此JavaScript等效）：

document.body.style.width = document.body.scrollWidth + 'px'

一切都按我的意愿工作，但理想情况下，我需要一个纯CSS解决方案，而不需要运行javascript将大小推高到容器中。

示例代码笔：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;
}

Answer 1

制作容器inline-flex并使用width代替flex-basis：

.container {
  display: inline-flex;
  height: 400px;
}

.stickybar {
  position: sticky;
  left: 0px;
  z-index: 10;
  margin-right: 5px;
  background-color: red;
}

.column {
  margin-right: 5px;
  width: 150px;
  border: 1px solid black;
}

<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>

如何使flexbox尺寸迫使容器增长

1 个答案: