Make content scroll horizontally within nested flex containers with position sticky

Issue

I have the following layout (see snippet below).

This is the expected behavior.

The problem is:
Once the extra-large-content is simulated (by removing the comment on the extra-large-content CSS rule), it breaks the layout.

I would like the extra-large-content to scroll horizontally while staying inside column-3.

Is this even possible?

(the code is also available here 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>

Solution

The issue comes from using flexbox.
Switching to grid fixes the problem.

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>

Answered By – Ploppy

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.