How to keep `overflow` inside a flex container?

Question

I have split my body space to 3 as header, content, footer. ( I require footer look like sticky on the bottom ) so I created a layout using flex property. But how can i add a scroller on my main container box?

I tried but no luck. here is my code :

*{
			padding:0;
			margin:0;
			box-sizing: border-box;
		}
		html,body{
			height: 100%;
		}
		body > section{
			display: flex;
			background: gray;
			border:5px solid green;
			min-height: 100%;
			flex-direction: column;
		}
		header{
			background: lightgreen;
		}
		section section{
			background: lightblue;
			flex:1 0 0;
		}

		h1{
			padding:2rem;
		}
		div.content{
			background: yellow;
			height: 100%;
			min-height: 100%;
			overflow-y: auto;
		}

<section>
		<header>
			<h1>Header will go here!</h1>
		</header>
		<section>
			<div class="content">
				<div>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.</div>
				<div>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!</div>
				<div>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?</div>
				<div>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.</div>
				<div>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.</div>
				<div>Iusto, obcaecati. Praesentium aliquid error, iste labore obcaecati sit, quo soluta necessitatibus voluptatibus suscipit ut veritatis repudiandae minima quibusdam accusamus itaque sunt consequuntur libero dolorem commodi! Libero, maiores esse culpa.</div>
				<div>Aliquam earum ab delectus ipsum architecto ipsam, sed repudiandae, consequuntur doloribus sit optio. Consectetur temporibus quia ipsa! Voluptas, esse debitis recusandae atque. Autem facilis deserunt id quia pariatur officiis sapiente.</div>
				<div>Magni aspernatur ab vitae quae quod eius est consequuntur similique neque, soluta repellendus perspiciatis placeat voluptatem aut quidem provident autem consequatur nisi fugit deserunt, eligendi laboriosam veritatis! Voluptate similique, libero.</div>
				<div>Omnis repellat alias ducimus facere dolor illum consequuntur? Ipsa nihil expedita sapiente odit, eum aut similique iusto. Illum deleniti natus quo in, facere voluptatibus velit, eius architecto, unde quos reiciendis.</div>
				<div>Tempore nisi quo quibusdam temporibus tenetur ducimus, veritatis sed quas incidunt repellendus vero, officia veniam commodi doloremque excepturi asperiores dolorum minima corporis hic ipsam vel assumenda minus, aperiam autem! Suscipit?</div>
				<div>Sit velit quod voluptas natus! Consequuntur asperiores commodi delectus perspiciatis, accusantium tempore consectetur repudiandae minus eaque at, labore exercitationem eligendi sequi quae esse recusandae. Aut eius facere qui ut ex.</div>
				<div>Architecto reprehenderit impedit blanditiis repellat laboriosam, distinctio voluptate, ut expedita autem quis explicabo eius necessitatibus quod sed, iusto fuga facilis dicta mollitia praesentium exercitationem consequatur sunt. Perspiciatis consequuntur ex pariatur.</div>
				<div>Magnam sapiente iste nisi, nostrum ut voluptatem vero facere ratione facilis nesciunt est quo natus assumenda ipsa hic. Tempora corrupti officiis minima cupiditate odio nisi nobis, doloribus veniam, fugit rem.</div>
				<div>Aliquam officia ad aperiam, molestiae reiciendis repudiandae nostrum odit rerum id consequuntur et dolore, quas ut, repellat quia sunt delectus vel doloremque sit incidunt, libero omnis. Eos quis saepe ipsum.</div>
				<div>Sit officiis, porro quam laboriosam quaerat provident assumenda suscipit, quod nulla praesentium expedita, quos eligendi corporis veritatis illo dolorem ipsam quidem earum! Optio neque odio, voluptatem. Asperiores possimus voluptas similique!</div>
				<div>Repellat rem veniam expedita accusamus animi necessitatibus dolore explicabo esse provident eligendi at quo cupiditate beatae voluptatem delectus sit hic recusandae ab mollitia reprehenderit soluta perspiciatis, incidunt ipsam, eveniet. Eum.</div>
				<div>Eos ipsum ducimus nemo tempora molestias ea voluptas possimus sit laudantium temporibus eveniet quod at aut deserunt minus reiciendis sint corporis accusantium, facere doloribus et, fugit impedit. Nihil, tenetur, delectus.</div>
				<div>Odit cupiditate iure sunt sit itaque quisquam, dolore cumque mollitia, animi libero in error, praesentium adipisci suscipit magnam consectetur a corrupti aperiam voluptatem nesciunt sed provident obcaecati recusandae! Culpa, voluptatibus!</div>
				<div>Maiores ex dolor perferendis. Fugiat, nulla laborum illum, optio in totam sed vitae minima ex tempora. Veniam, nobis, similique. Doloribus molestias veniam enim distinctio tenetur sapiente, eius perspiciatis dolore sint.</div>
				<div>Et hic corporis omnis, neque deleniti nulla pariatur dignissimos ad suscipit dolore maxime aut atque, labore cupiditate odio. Facilis, ex! Adipisci excepturi placeat sit quibusdam deserunt dolorem repellat laboriosam, quos.</div>
				<div>Culpa nemo impedit ab nisi suscipit, corporis odio molestiae quidem cumque ad veniam eveniet reprehenderit provident minus, ipsa vitae autem quas, cupiditate quibusdam quisquam. Veniam aliquid quas recusandae aperiam distinctio.</div>
				<div>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>
				<div>Ullam, possimus. In dignissimos odio libero reprehenderit nesciunt facilis dicta nisi recusandae quis esse similique, blanditiis maxime fuga atque id aliquam rerum molestiae, quasi architecto, vitae, soluta earum dolorum laborum.</div>
				<div>Voluptate eaque repudiandae corporis unde facilis sunt repellendus quis, aliquid culpa provident dignissimos, minima quos placeat! Eos iusto quasi quo, quidem vero quos tempore, quibusdam, doloribus mollitia repellat dolorum reiciendis.</div>
				<div>Officiis nisi ducimus quibusdam. Facilis obcaecati iste culpa id ullam quos reprehenderit laboriosam explicabo, quibusdam voluptatum, eius quam alias veniam dolorum, neque dolorem recusandae! Est obcaecati repellat eaque reiciendis. Suscipit.</div>
				<div>Ullam, voluptatum facere quis enim, dolorum, neque excepturi earum ad sint, maiores obcaecati modi? Laboriosam repellendus dolor, aperiam voluptatem explicabo consequuntur, autem, nostrum, provident eveniet voluptatibus numquam minima nesciunt non.</div>
				<div>Enim eum distinctio quis voluptas ea quisquam corrupti molestiae, cum id voluptate soluta, molestias provident. Voluptatibus enim, hic deserunt aut consequatur mollitia fuga error dignissimos magnam ea nobis excepturi recusandae.</div>
				<div>Distinctio rem ab hic quo dolor aliquam, dolorum neque, saepe incidunt unde odit earum maxime officiis consequuntur quos natus commodi. Illo molestiae quo ipsa voluptas odit. Sunt incidunt soluta omnis!</div>
				<div>Sit fuga maxime pariatur praesentium illo ducimus facere veniam molestias in illum doloribus ab quibusdam ipsa iusto sint officia, impedit, quae omnis, molestiae perspiciatis repellat beatae. Eaque quam iusto fuga.</div>
				<div>Voluptatibus unde blanditiis veritatis, ipsa libero asperiores accusamus impedit laudantium doloremque. Reprehenderit similique, mollitia quam repudiandae libero totam doloribus sapiente molestiae officiis. Similique culpa, labore odit quae minus dignissimos, distinctio.</div>
			</div>
		</section>
		<footer>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ducimus error, ut optio alias? Voluptas, explicabo. Exercitationem temporibus earum perferendis repellendus, tenetur corporis, iste cumque tempora odit atque porro modi?</div>
			<div>Debitis sit sint tempore earum quasi impedit est neque vitae, deleniti dolorem, mollitia totam laborum! Praesentium officiis dolorum quibusdam impedit voluptate voluptatibus, vero quas mollitia, ex labore amet aperiam, consectetur.</div>
			<div>Voluptas ducimus reprehenderit quae id deleniti rem fuga nostrum alias, tempore nemo ullam aspernatur autem distinctio dicta unde odio dolor dolores amet consequatur nisi quam, consectetur facilis. Ducimus, facilis, laudantium.</div>
		</footer>
	</section>

div.content{
            background: yellow;
            height: 100%;
            min-height: 100%;
            overflow-y: auto; //not works!!
        }

Temani Afif · Accepted Answer · 2017-11-27 08:20:08Z

You're almost good but the HTML structure can be improved (you can remove some useless section tags), you also need to use height:100vh to cover all the page height and obtain the needed scrollable content. You may try this.

go full page for better result

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body { /* I used the body as the main continer but you may use another one */
  display: flex;
  background: gray;
  border: 5px solid green;
  flex-direction: column;
  height: 100vh;
}

header {
  background: lightgreen;
}

h1 {
  padding: 2rem;
}

section.content {
  background: yellow;
  flex: 1;
  overflow-y: auto;
}

<header>
  <h1>Header will go here!</h1>
</header>
<section class="content">
  <div>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.</div>
  <div>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!</div>
  <div>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?</div>
  <div>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.</div>
  <div>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.</div>
  <div>Iusto, obcaecati. Praesentium aliquid error, iste labore obcaecati sit, quo soluta necessitatibus voluptatibus suscipit ut veritatis repudiandae minima quibusdam accusamus itaque sunt consequuntur libero dolorem commodi! Libero, maiores esse culpa.</div>
  <div>Aliquam earum ab delectus ipsum architecto ipsam, sed repudiandae, consequuntur doloribus sit optio. Consectetur temporibus quia ipsa! Voluptas, esse debitis recusandae atque. Autem facilis deserunt id quia pariatur officiis sapiente.</div>
  <div>Magni aspernatur ab vitae quae quod eius est consequuntur similique neque, soluta repellendus perspiciatis placeat voluptatem aut quidem provident autem consequatur nisi fugit deserunt, eligendi laboriosam veritatis! Voluptate similique, libero.</div>
  <div>Omnis repellat alias ducimus facere dolor illum consequuntur? Ipsa nihil expedita sapiente odit, eum aut similique iusto. Illum deleniti natus quo in, facere voluptatibus velit, eius architecto, unde quos reiciendis.</div>
  <div>Tempore nisi quo quibusdam temporibus tenetur ducimus, veritatis sed quas incidunt repellendus vero, officia veniam commodi doloremque excepturi asperiores dolorum minima corporis hic ipsam vel assumenda minus, aperiam autem! Suscipit?</div>
  <div>Sit velit quod voluptas natus! Consequuntur asperiores commodi delectus perspiciatis, accusantium tempore consectetur repudiandae minus eaque at, labore exercitationem eligendi sequi quae esse recusandae. Aut eius facere qui ut ex.</div>
  <div>Architecto reprehenderit impedit blanditiis repellat laboriosam, distinctio voluptate, ut expedita autem quis explicabo eius necessitatibus quod sed, iusto fuga facilis dicta mollitia praesentium exercitationem consequatur sunt. Perspiciatis consequuntur
    ex pariatur.</div>
  <div>Magnam sapiente iste nisi, nostrum ut voluptatem vero facere ratione facilis nesciunt est quo natus assumenda ipsa hic. Tempora corrupti officiis minima cupiditate odio nisi nobis, doloribus veniam, fugit rem.</div>
  <div>Aliquam officia ad aperiam, molestiae reiciendis repudiandae nostrum odit rerum id consequuntur et dolore, quas ut, repellat quia sunt delectus vel doloremque sit incidunt, libero omnis. Eos quis saepe ipsum.</div>
  <div>Sit officiis, porro quam laboriosam quaerat provident assumenda suscipit, quod nulla praesentium expedita, quos eligendi corporis veritatis illo dolorem ipsam quidem earum! Optio neque odio, voluptatem. Asperiores possimus voluptas similique!</div>
  <div>Repellat rem veniam expedita accusamus animi necessitatibus dolore explicabo esse provident eligendi at quo cupiditate beatae voluptatem delectus sit hic recusandae ab mollitia reprehenderit soluta perspiciatis, incidunt ipsam, eveniet. Eum.</div>
  <div>Eos ipsum ducimus nemo tempora molestias ea voluptas possimus sit laudantium temporibus eveniet quod at aut deserunt minus reiciendis sint corporis accusantium, facere doloribus et, fugit impedit. Nihil, tenetur, delectus.</div>
  <div>Odit cupiditate iure sunt sit itaque quisquam, dolore cumque mollitia, animi libero in error, praesentium adipisci suscipit magnam consectetur a corrupti aperiam voluptatem nesciunt sed provident obcaecati recusandae! Culpa, voluptatibus!</div>
  <div>Maiores ex dolor perferendis. Fugiat, nulla laborum illum, optio in totam sed vitae minima ex tempora. Veniam, nobis, similique. Doloribus molestias veniam enim distinctio tenetur sapiente, eius perspiciatis dolore sint.</div>
  <div>Et hic corporis omnis, neque deleniti nulla pariatur dignissimos ad suscipit dolore maxime aut atque, labore cupiditate odio. Facilis, ex! Adipisci excepturi placeat sit quibusdam deserunt dolorem repellat laboriosam, quos.</div>
  <div>Culpa nemo impedit ab nisi suscipit, corporis odio molestiae quidem cumque ad veniam eveniet reprehenderit provident minus, ipsa vitae autem quas, cupiditate quibusdam quisquam. Veniam aliquid quas recusandae aperiam distinctio.</div>
  <div>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>
  <div>Ullam, possimus. In dignissimos odio libero reprehenderit nesciunt facilis dicta nisi recusandae quis esse similique, blanditiis maxime fuga atque id aliquam rerum molestiae, quasi architecto, vitae, soluta earum dolorum laborum.</div>
  <div>Voluptate eaque repudiandae corporis unde facilis sunt repellendus quis, aliquid culpa provident dignissimos, minima quos placeat! Eos iusto quasi quo, quidem vero quos tempore, quibusdam, doloribus mollitia repellat dolorum reiciendis.</div>
  <div>Officiis nisi ducimus quibusdam. Facilis obcaecati iste culpa id ullam quos reprehenderit laboriosam explicabo, quibusdam voluptatum, eius quam alias veniam dolorum, neque dolorem recusandae! Est obcaecati repellat eaque reiciendis. Suscipit.</div>
  <div>Ullam, voluptatum facere quis enim, dolorum, neque excepturi earum ad sint, maiores obcaecati modi? Laboriosam repellendus dolor, aperiam voluptatem explicabo consequuntur, autem, nostrum, provident eveniet voluptatibus numquam minima nesciunt non.</div>
  <div>Enim eum distinctio quis voluptas ea quisquam corrupti molestiae, cum id voluptate soluta, molestias provident. Voluptatibus enim, hic deserunt aut consequatur mollitia fuga error dignissimos magnam ea nobis excepturi recusandae.</div>
  <div>Distinctio rem ab hic quo dolor aliquam, dolorum neque, saepe incidunt unde odit earum maxime officiis consequuntur quos natus commodi. Illo molestiae quo ipsa voluptas odit. Sunt incidunt soluta omnis!</div>
  <div>Sit fuga maxime pariatur praesentium illo ducimus facere veniam molestias in illum doloribus ab quibusdam ipsa iusto sint officia, impedit, quae omnis, molestiae perspiciatis repellat beatae. Eaque quam iusto fuga.</div>
  <div>Voluptatibus unde blanditiis veritatis, ipsa libero asperiores accusamus impedit laudantium doloremque. Reprehenderit similique, mollitia quam repudiandae libero totam doloribus sapiente molestiae officiis. Similique culpa, labore odit quae minus dignissimos,
    distinctio.</div>
  <div>Voluptatibus unde blanditiis veritatis, ipsa libero asperiores accusamus impedit laudantium doloremque. Reprehenderit similique, mollitia quam repudiandae libero totam doloribus sapiente molestiae officiis. Similique culpa, labore odit quae minus dignissimos,
    distinctio.</div>
</section>
<footer>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ducimus error, ut optio alias? Voluptas, explicabo. Exercitationem temporibus earum perferendis repellendus, tenetur corporis, iste cumque tempora odit atque porro modi?</div>
  <div>Debitis sit sint tempore earum quasi impedit est neque vitae, deleniti dolorem, mollitia totam laborum! .</div>
</footer>

Collectives™ on Stack Overflow

How to keep `overflow` inside a flex container?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related