Overflow (y axis)

Below is a box with content inside it that is longer than the parent. Underneath are the CSS rules that make it work.

Output

Olivia Shakespear

Olivia Shakespear (born Olivia Tucker; 17 March 1863 – 3 October 1938) was a British novelist, playwright, and patron of the arts. She wrote six books that are described as "marriage problem" novels. Her works sold poorly, sometimes only a few hundred copies. Her last novel, Uncle Hilary, is considered her best. She wrote two plays in collaboration with Florence Farr.

Olivia was the daughter of a retired Adjutant General, and had little formal education. She was well-read however, and developed a love of literature. In 1885 she married London barrister Henry Hope Shakespear, and in 1886 gave birth to their only child, Dorothy. In 1894 her literary interests led to a friendship with William Butler Yeats that became physically intimate in 1896. Following their consummation he declared that they "had many days of happiness" to come,[1] but the affair ended in 1897. They nevertheless remained lifelong friends and corresponded frequently. Yeats went on to marry Georgie Hyde-Lees, Olivia's step-niece and Dorothy's best friend.

Olivia began hosting a weekly salon frequented by Ezra Pound and other modernist writers and artists in 1909, and became influential in London literary society. Dorothy Shakespear married Pound in 1914, despite the less than enthusiastic blessing of her parents. After their marriage, Pound would use funds received from Olivia to support T. S. Eliot and James Joyce. When Dorothy gave birth to a son, Omar Pound, in France in 1926, Olivia assumed guardianship of the boy. He lived with Olivia until her death on 3 October 1938.

CSS

  • .overflowBox {
  • height: 300px;
  • overflow-y: scroll;
  • }
Watch that overflow!

As the <p> tags inside don't have a width applied, they fit the parent's (<div class="overflowBox">) width, so don't allow for any sideways scrolling.

Remember, if you changed the rule for the attribute overflow to hidden; you would not be able to see or scroll the content that is not visible.

Overflow (x axis)

Below is a box with content inside it that is wider than the parent. Underneath are the CSS rules that make it work.

Output

Olivia Shakespear

Olivia Shakespear (born Olivia Tucker; 17 March 1863 – 3 October 1938) was a British novelist, playwright, and patron of the arts. She wrote six books that are described as "marriage problem" novels. Her works sold poorly, sometimes only a few hundred copies. Her last novel, Uncle Hilary, is considered her best. She wrote two plays in collaboration with Florence Farr.

Olivia was the daughter of a retired Adjutant General, and had little formal education. She was well-read however, and developed a love of literature. In 1885 she married London barrister Henry Hope Shakespear, and in 1886 gave birth to their only child, Dorothy. In 1894 her literary interests led to a friendship with William Butler Yeats that became physically intimate in 1896. Following their consummation he declared that they "had many days of happiness" to come,[1] but the affair ended in 1897. They nevertheless remained lifelong friends and corresponded frequently. Yeats went on to marry Georgie Hyde-Lees, Olivia's step-niece and Dorothy's best friend.

Olivia began hosting a weekly salon frequented by Ezra Pound and other modernist writers and artists in 1909, and became influential in London literary society. Dorothy Shakespear married Pound in 1914, despite the less than enthusiastic blessing of her parents. After their marriage, Pound would use funds received from Olivia to support T. S. Eliot and James Joyce. When Dorothy gave birth to a son, Omar Pound, in France in 1926, Olivia assumed guardianship of the boy. He lived with Olivia until her death on 3 October 1938.

CSS

  • .overflowBox {
  • height: 300px;
  • overflow-x: scroll;
  • }
  • .overflowBox p {
  • width: 1000px;
  • }
Watch that overflow!

See that we have had to add a CSS rule for the <p> tags that sit inside the box. This is so the parent conatiner (<div class="overflowBox">) knows that the content it holds is larger than itself, allowing us to scroll sideways.