Can't scroll to top of flex item that is overflowing container

can synonym
can verb
can.'' acronym
meaning of can in hindi
can band
can pronunciation
cant
can y

So, in attempting to make a useful modal using flexbox, I found what seems to be a browser issue and am wondering if there is a known fix or workaround -- or ideas on how to resolve it.

The thing I'm trying to solve, has two aspects. First, getting the modal window vertically centered, which works as expected. The second is to get the modal window to scroll -- externally, so the whole modal window scrolls, not the contents within it (this is so you can have dropdowns and other UI elements that can extend outside of the bounds of the modal -- like a custom date picker, etc.)

However, when combining the vertical centering with scroll bars, the top of the modal can become inaccessible as it begins to overflow. In the above example, you can resize to force the overflow, and in doing so it allows you to scroll to the bottom of the modal, but not to the top (first paragraph is cut off).

Here's the link to the example code (highly simplified)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

This effects (current) Firefox, Safari, Chrome, and Opera.. It does interestingly behave correctly in IE10 if you comment in the IE10 vender prefixed css -- I did not bother testing in IE11 yet, but assume the behavior matches that of IE10.

Any ideas would be good. Links to known issues, or reasoning behind this behavior would also be useful.

The Problem

Flexbox makes centering very easy.

By simply applying align-items: center and justify-content: center to the flex container, your flex item(s) will be vertically and horizontally centered.

However, there is a problem with this method when the flex item is bigger than the flex container.

As noted in the question, when the flex item overflows the container the top becomes inaccessible.

For horizontal overflow, the left section becomes inaccessible (or right section, in RTL languages).

Here's an example with an LTR container having justify-content: center and three flex items:

See the bottom of this answer for an explanation of this behavior.


Solution #1

To fix this problem use flexbox auto margins, instead of justify-content.

With auto margins, an overflowing flex item can be vertically and horizontally centered without losing access to any part of it.

So instead of this code on the flex container:

#flex-container {
    align-items: center;
    justify-content: center;
}

Use this code on the flex item:

.flex-item {
    margin: auto;
}

Revised Demo


Solution #2 (not yet implemented in most browsers)

Add the safe value to your keyword alignment rule, like this:

justify-content: safe center

or

align-self: safe center

From the CSS Box Alignment Module specification:

4.4. Overflow Alignment: the safe and unsafe keywords and scroll safety limits

When the [flex item] is larger than the [flex container], it will overflow. Some alignment modes, if honored in this situation, may cause data loss: for example, if the contents of a sidebar are centered, when they overflow they may send part of their boxes past the viewport’s start edge, which can’t be scrolled to.

To control this situation, an overflow alignment mode can be explicitly specified. Unsafe alignment honors the specified alignment mode in overflow situations, even if it causes data loss, while safe alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.

The default behavior is to contain the alignment subject within the scrollable area, though at the time of writing this safety feature is not yet implemented.

safe

If the size of the [flex item] overflows the [flex container], the [flex item] is instead aligned as if the alignment mode were [flex-start].

unsafe

Regardless of the relative sizes of the [flex item] and [flex container], the given alignment value is honored.

Note: The Box Alignment Module is for use across multiple box layout models, not just flex. So in the spec excerpt above, the terms in brackets actually say "alignment subject", "alignment container" and "start". I used flex-specific terms to keep the focus on this particular problem.


Explanation for scroll limitation from MDN:

Flex item considerations

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container.

This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge [...], as you can't scroll to that area, even if there is content there!

In a future release, the alignment properties will be extended to have a "safe" option as well.

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow.

Instead of using the align- properties, just put auto margins on the flex items you wish to center.

Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.

The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not.

However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

Can, See also: Appendix:Variations of "can". Contents. 1 English. 1.1 Etymology 1. 1.1.​1 Alternative forms; 1.1.2 Pronunciation; 1.1.3 Verb. 1.1.3.1 Usage notes  Can definition, to be able to; have the ability, power, or skill to: She can solve the problem easily, I'm sure. See more.

Well, as Murphy's Law would have it, the reading I did after posting this question resulted in a few results -- not completely resolved, but somewhat useful nonetheless.

I played around with min-height a bit before posting, but was not aware of the intrinsic sizing constraints that are fairly new to the spec.

http://caniuse.com/#feat=intrinsic-width

Adding a min-height: min-content to the flexbox area does resolve the issue in Chrome, and with vendor prefixes also fixes Opera and Safari, though Firefox remains unresolved.

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

Still looking for ideas on Firefox, and other potential solutions.

CAN, Can may refer to: Contents. 1 Containers; 2 Music; 3 Other; 4 See also. Containers[edit]. Aluminum can · Drink can · Oil can · Steel and tin cans · Trash can  Define can. can synonyms, can pronunciation, can translation, English dictionary definition of can. to be able to, have the power or skill to: I can take a bus to the airport. She can paint very well.

I managed to pull this off with just 3 containers. The trick is to separate the flexbox container from the container that controls the scrolling. Lastly, put everything into a root container to center it all. Here are the essential styles to create the effect:

CSS:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

I've created a demo here: https://jsfiddle.net/r5jxtgba/14/

can, The definition of a can is a container normally made of metal with a lid. An example of can is what tuna comes in. verb. Can means someone or something knows  can definition: 1. to be able to: 2. used to say that you can and will do something: 3. to be allowed to: . (Definition of can from the Cambridge Business English

I think I found a solution. It works with lots of text and a little text. You don't need to specify the widths of anything, and it should work in IE8.

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}
<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Can, Could is used as the past tense of can when it means that someone had the ability to do something, or that something was possible: New York was a place  110 synonyms of can from the Merriam-Webster Thesaurus, plus 97 related words, definitions, and antonyms. Find another word for can.

According to MDN, the safe value can now be provided to properties like align-items and justify-content. It's described as follows:

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.

So, it might be used as follows.

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

However, it's unclear how much browser support it has, I could not find any examples of its use, and I have been having some issues with it myself. Mentioning it here to draw more attention to it.

Can dictionary definition, Can was the leading avant-garde rock group of the 70s. Can experimented with noise, synthesizers, non-traditional music, cut-and-paste techniques, and, most  Can (stylised as CAN) was a German experimental rock band formed in Cologne in 1968 by the core quartet of Holger Czukay (bass, tape editing), Irmin Schmidt (keyboards), Michael Karoli (guitar), and Jaki Liebezeit (drums).

CAN (modal verb) definition and synonyms, language note: Can is a modal verb. It is used with the base form of a verb. The form cannot is used in negative statements. The usual spoken form of cannot is  A Controller Area Network (CAN bus) is a robust vehicle bus standard designed to allow microcontrollers and devices to communicate with each other's applications without a host computer. It is a message-based protocol, designed originally for multiplex electrical wiring within automobiles to save on copper, but can also be used in many other

The Official CAN / Spoon Records Website, We would like to show you a description here but the site won’t allow us.

Can definition and meaning, Can I Run It? System Requirements Lab analyzes your computer in just seconds, and it's FREE. See for yourself, takes less than a minute. The question of Can I run a PC game has been answered here hundreds of millions of times since 2005. Find out now if your computer can run any popular PC game.

Comments
  • Yes, that's a better solution, and thank you for providing the additional valuable insight.
  • It should be noted that is does not work in IE11. The background will be cut off.
  • @Daniel, I just tested the code in IE11. Nothing is inaccessible. In fact, the problem described in the question doesn't even exist in IE11. You may be referring to the text overflow happening only in IE11. That's another issue for another question.
  • To fix issue in IE11: add align-items: flex-start to the flex container and keep margin: auto for flex item.
  • This does not work for me when using flex-direction: column;
  • I just wanted to say that it already works for me in Firefox. So the solution with min-content was perfect.
  • @pudgereyem I guess they implemented it then. The other solution with margin: auto stops flex-basis from working for me whereas this answer solved both issues.
  • A brilliant solution indeed. I don't care about Edge or IE, so this works perfectly for me!
  • thx for a scroll-container tips, i searched since two days for fix my ***** scroll content !!!
  • remember, dont give flex: 1 1 auto to the scroll-container. I was doing this with on habit and got into problem.
  • This is the best solution for legacy browsers. Thank you very much!
  • Wow, that's a lot of wraps.
  • Wow, I've spent hours trying to achieve this. (All other methods fail in mobile chrome when you add animations. This doesn't) Thanks soooo much!