Why isn't my position: sticky element sticking in my flexbox container?

Why isn't my position: sticky element sticking in my flexbox container?

I have a container that is set to display: flex. My child element is set to position: sticky with a top set, but the element is not sticking at all, it just continues with the flow of the page. I've tried to set the align-items property to no avail.

I have a container that is set to display: flex. My child element is set to position: sticky with a top set, but the element is not sticking at all, it just continues with the flow of the page. I've tried to set the align-items property to no avail.

What else am I missing to make this stick? It's basically just sticking the sidebar to the top of its column.

.single-casestudy .casestudy-content {
    align-items: flex-start;
}
.row {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
.single-casestudy .results {
    font-size: 24px;
    font-family: "Lato", sans-serif;
    color: #333f48;
    line-height: 1.349;
    text-align: center;
    margin-bottom: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

@media only screen and (min-width: 62em) .col-md-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; }

@media only screen and (min-width: 62em) .col-md-4 { box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } <div class="row casestudy-content"> <div class="col-xs-12 col-md-4 results"> content here </div> <div class="col-xs-12 col-md-8 thecontent"> more content here </div> </div>


html css css3

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

HTML And CSS Tutorial For Beginners | Complete HTML & CSS Course In One Tutorial

In this video you will learn basics of HTML and CSS from beginning. This HTML and CSS course is best for Beginners to start learning web design and web development. In this HTML and CSS Beginners tutorial we will discuss all the important HTML tags, CSS properties to design the website with some example and explanation. We will also learn about animation using CSS.

Stay at Home Animation in HTML CSS - Covid-19 | SVG to HTML CSS |

Stay at home Animation in html css - COVID-19 . Adobe illustrator SVG To HTML CSS Animation . corona-virus. Adobe illustrator to HTML & CSS Animation.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...