I've organized my body space into three sections: header, content, and footer. To achieve a sticky footer effect at the bottom, I used the flex property in my layout. However, I'm struggling to add a scrollbar to my main container box.
I've attempted it without success. Here is the code:
Header goes here!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde deserunt et, quibusdam quidem dolores minus cupiditate veniam laborum, placeat, maiores illum voluptas, at ipsam voluptates! Alias enim, reiciendis debitis commodi.
Quasi, exercitationem, at! Voluptas, similique corrupti reprehenderit odio fuga omnis cum dicta, fugiat vero, eveniet neque! Illo architecto aut ullam provident, aliquid voluptatum voluptates, consequuntur similique, soluta sunt voluptatem blanditiis!
A animi dignissimos ipsam, minus et odit ea. Dignissimos nesciunt, numquam eius expedita quas quibusdam vitae ea unde molestiae aperiam labore adipisci officia veritatis iste, omnis odio ipsam soluta doloremque?
Eveniet, explicabo, commodi? Accusantium cum hic doloremque ullam, eos explicabo commodi voluptatibus animi nesciunt dicta, nam fuga iure sapiente cupiditate nihil corrupti nemo inventore vel at laboriosam, ea praesentium id.
Ullam vel, sequi dolor distinctio repellendus ipsa assumenda in, fuga ab vitae iusto vero? Facilis quos quam, provident quia, a voluptatum nulla reiciendis nostrum, repellat repudiandae necessitatibus consequuntur odit praesentium.
... (content continues) ...
Magni beatae quod mollitia cupiditate reprehenderit ratione aperiam quae, quasi animi esse neque laborum voluptatibus doloribus error consequuntur autem consectetur illum architecto, similique minima vitae cumque? Consequuntur quos, eveniet minus!
div.content{
background: yellow;
height: 100%;
min-height: 100%;
overflow-y: auto; //not working!!
}