CSS Overflow

April 24, 2024 1:38 am Published by amax

Overflow

Sometimes things bleed off the parent element. We seen this in the Pac-Man assignment when we animated the characters off the screen, across the screen and than off the screen again. To hide things that go outside an element we can hide the overflow. It does not stop there though. Sometimes when a div container is shrank in size child elements can also bleed out of the element and we can use different overflow methods to mitigate this. There are many other scenarios where we would need to control the overflow of an element.

We can control:

overflow-x – controls overflow on the X Axis
overflow-y – controls overflow on the Y Axis
overflow – controls overflow on all Axis

Values:

overflow: visible;

The overflow will be visible.

overflow: hidden;

The overflow will be clipped out.

overflow: scroll;

If there is overflow, the content will have a scroll bar and
the user can use it to see the remaining content.

overflow: auto;

Scrollbars are added only if the content within an element’s box is too large to fit.

overflow: inherit;

Control of the overflow will be inherited from parent element.

overflow: initial;

Sets the overflow to its default value. (the initial value always sets to default)

overflow: unset;

Overflow control will be inherited from parent and of not than overflow will be default.

Lets take a look at the overflow examples and examine.

Overflow Not Set (The content will bleed out of the container!)

Overflow Hidden (The content will clip on all axis)

.text-box { height: 500px; width: 500px; border: 4px solid #000; overflow: hidden; margin-bottom: 100px; }

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia iure eum nobis ipsam nam, cupiditate reprehenderit sint fugit. Provident commodi consequatur, quia magni vel expedita, est aspernatur hic mollitia rem pariatur maxime tenetur odio natus facilis numquam quaerat eius ad doloribus voluptates ab! Corrupti possimus necessitatibus exercitationem, optio qui temporibus totam. Voluptas nostrum reiciendis numquam? Inventore ipsa doloribus perspiciatis voluptas aut eos, voluptatem tenetur, id, est veritatis distinctio sunt odio explicabo illum deleniti nulla dignissimos. Nesciunt nam obcaecati facere consequatur quas molestias sequi? Laudantium blanditiis labore ipsam, enim praesentium ipsa alias, repudiandae beatae aperiam sit vero. Laboriosam ut natus adipisci quae beatae, laudantium voluptates quasi consequuntur dolor architecto laborum nemo. Dolor blanditiis adipisci commodi, temporibus, obcaecati dolores reiciendis eligendi nemo aliquam voluptates fugiat et. Nisi ipsam non nemo tempora neque cumque, corporis provident alias illo. Aliquid fugiat ipsa, laborum culpa officia quaerat iste. Nam vero nihil quisquam perspiciatis omnis doloremque, animi quibusdam exercitationem deleniti eos voluptatem dolorum reiciendis beatae. Quisquam rem error, libero beatae blanditiis, culpa odio numquam quibusdam cupiditate explicabo cum, molestias dolorum dignissimos sint ipsam aliquid adipisci quod aliquam. Enim accusamus magni voluptatum autem rerum, debitis facere repellendus doloremque veniam expedita esse dolorum cupiditate quasi, nam molestias illum omnis provident officia vitae odit mollitia? Minima architecto quae quaerat praesentium ab! Perspiciatis alias ab ex totam! Nisi ex exercitationem, asperiores magnam ducimus, debitis corrupti eos necessitatibus, ut tempore consectetur. Voluptas, quasi. A quae architecto libero cum. Maxime quo magnam, nesciunt delectus ipsum ex tempora voluptas eum modi, illo natus? Omnis earum quam possimus magni! Libero totam ratione repellat minus repudiandae maxime eius quae eos et necessitatibus temporibus facilis vero, voluptatum quos expedita dolor veritatis omnis eum? Sit ea minus saepe et cupiditate voluptates fugiat molestiae eaque nulla, in sint non! Vitae sequi corporis ipsum. Officiis ut praesentium excepturi veniam aspernatur libero quasi, ducimus quam autem repudiandae esse recusandae cum aliquam consequuntur ullam. Facilis officia inventore totam cupiditate quae magni ducimus nihil mollitia dolores expedita accusantium rem fugit at fugiat, exercitationem deserunt. Ipsum a voluptas dolor, necessitatibus nostrum eveniet debitis vero ex quae minima explicabo itaque voluptatum voluptatem? Consequatur fuga voluptatem quasi mollitia magnam ullam tempore minus libero molestiae commodi fugiat voluptate delectus, minima accusamus totam veritatis fugit sunt enim! Pariatur, ipsam laudantium quibusdam dolores repellat nostrum? Optio nostrum incidunt quod commodi laudantium exercitationem vero corporis minima amet eos, illo iusto error consequuntur voluptate et atque aspernatur fugiat laborum est rem id dolorum eveniet. Id iste enim quasi iure maiores itaque reiciendis nulla iusto veniam at delectus consectetur eum ea numquam, odit ullam incidunt hic amet voluptas quas soluta. Repellendus sed qui ad aliquam tenetur odio quis, voluptatum similique optio illum reprehenderit assumenda cupiditate quisquam esse magni rem obcaecati exercitationem beatae. Impedit distinctio, quidem autem exercitationem quia alias similique dolorum voluptatum consequatur adipisci mollitia facere eius pariatur assumenda, unde sed, voluptate aliquid dicta nihil labore delectus optio ea dolores? Nemo vel ut illum nostrum harum, fugiat voluptatem quisquam obcaecati at laboriosam nulla totam porro, cum quibusdam ex deserunt numquam?

Overflow Visible (The content will bleed out of the container!)

.text-box { height: 500px; width: 500px; border: 4px solid black; overflow: visible; margin-bottom: 600px; }

Overflow scroll (will scroll both on X and Y axis)

.text-box { height: 500px; width: 500px; border: 4px solid black; overflow: scroll; margin-bottom: 100px; } .text-box p { width: 800px; height: 800px; }

Overflow-X Scroll (Will only scroll on the X axis)

.text-box { height: 500px; width: 500px; border: 4px solid black; overflow-x: scroll; overflow-y:hidden; margin-bottom: 100px; { .text-box p { width: 800px; height: 800px; }

Overflow-Y Scroll (Will only scroll on the Y axis)

.text-box { height: 500px; width: 500px; border: 4px solid black; overflow-x:hidden; overflow-y: scroll; margin-bottom: 100px; } .text-box p { width: 800px; height: 800px; }

Categorised in: Lectures, Portfolio, WEBD 150

This post was written by amax

Comments are closed here.

Anthony Maximus

The Way Of The Polymath