1

Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.

Here's a demo with some expected and actual results.

Using the demo:

  1. Open the demo
  2. Enter lots of text in the gray box

Expected result:

The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.

Actual result:

The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.

Other notes:

It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.

John Karahalis
  • 3,369
  • 2
  • 15
  • 20

2 Answers2

1

You need to do the following:

  1. Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.

  2. If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.

(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)

Here's your JS Fiddle with this fix

dholbert
  • 11,386
  • 3
  • 42
  • 31
0

In your css you need to give height

p {
    padding: 20px;
    width: 100%;
    background-color: #ccc;
    outline: none;
    height: 60px;

}

JS Fiddle

Anant Dabhi
  • 10,864
  • 3
  • 31
  • 49
  • Thanks for the answer. The goal is for the paragraph to be vertically centered at first, and then grow to be (at most) as tall as the container, so a fixed height wouldn't be enough. – John Karahalis Dec 17 '14 at 03:50