使内容在嵌套的 flex 容器中水平滚动，位置为粘性

Question

我有以下布局（见下面的片段）。

这是预期的行为。

问题是：一旦 extra-large-content 被模拟（通过删除 extra-large-content CSS 规则的注释），它会破坏布局。

我希望 extra-large-content 在 column-3 内水平滚动。

这可能吗？

（代码也可以在这里找到https://codepen.io/Ploddy/pen/NWXOgMG?editors=1100）

body {
  height: 1920px;
  margin: 0;
}
.container {
  display: flex;
  border: 1px solid #ccc;
  margin: 1rem;
}
.container > * {
  border: 1px solid #ccc;
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-grow: 1;
  margin: 1rem;
}
#column-3 {
  height: 300px;
}
#extra-large-content {
  background-color: lightgreen;
  /*width: 3000px;*/
}

<div class="container">
  <div>
    column-1
  </div>
  <div class="container">
    <div>
      column-2
    </div>
    <div id="column-3">
      column-3
      <div id="extra-large-content">
        extra-large content
      </div>
    </div>
  </div>
</div>

Answer 1

这应该很适合您。本质上，我只是在 .container 元素上指定了 width。理论上，您可以将 overflow-x: scroll; 放在 .container 上，但是，这会破坏您的 sticky 定位。

编辑 ~ OP 希望 extra-large 内容水平滚动，而不是整个第 3 列。

在具有 3000px 静态宽度的 div 的新父包装上设置 overflow-x: scroll;。

body {
  height: 1920px;
  margin: 0;
}

.container:first-child {
  max-width: 100%;
}

.container:first-child > div:first-child {
  width: 40%;
}

.container:nth-child(2) {
  width: 60%;
}

.container:nth-child(2) > div:first-child {
  margin: 1em 0em 1em 1em;
}

.container {
  display: flex;
  border: 1px solid #ccc;
  margin: 1rem;
}

.container>* {
  border: 1px solid #ccc;
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-grow: 1;
  margin: 1rem;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 40%;
}

#column-3 {
  background-color: salmon;
}

#extra-large-content {
  height: 300px;
  width: 3000px;
  background-color: lightgreen;
}

.xl-content-wrapper {
  overflow-x: scroll;
}

<div class="container">
  <div>column-1</div>
  <div class="container">
    <div>column-2</div>
    <div class="wrapper">
      <div id="column-3">column-3</div>
      <div class="xl-content-wrapper">
        <div id="extra-large-content">extra-large content</div>
      </div>
    </div>
  </div>
</div>

Answer 2

问题来自于使用 flexbox。切换到网格可以解决问题。

body {
  height: 1920px;
  margin: 0;
}
#primary-container {
  position: relative;
  display: flex;
  margin: 1rem;
}
#secondary-container {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: start;
}
#column-3 {
  display: grid;
  grid-auto-rows: min-content;
  height: 200px;
}
#content-wrapper {
  overflow: auto;
}
#extra-large-content {
  width: 3000px;
  background-color: lightgreen;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.border {
  border: 1px solid #ccc;
}

<div id="primary-container" class="border">
  <div class="sticky">
    column1
  </div>
  <div id="secondary-container" class="border">
    <div class="sticky">
      column2
    </div>
    <div id="column-3" class="sticky border">
      column3
      <div id="content-wrapper">
        <div id="extra-large-content">
          extra-large content
        </div>
      </div>
      ...
    </div>
  </div>
</div>

使内容在嵌套的 flex 容器中水平滚动，位置为粘性

Make content scroll horizontally within nested flex containers with position sticky

html

css

flexbox