The title of Unable to scroll to top of flex item in overflow container is rewritten as: Unable to scroll to top of flex item in overflow container

Question

While trying to create a useful modal using flexbox, I came across what appears to be a browser issue and was wondering if there was a known fix or workaround - or any ideas on how to fix it idea.

The problem I'm trying to solve has two aspects. First, centering the modal window vertically works as expected. The second is to make the modal window scroll - external scrolling, so the entire modal window scrolls, not the content within it (this way you can have dropdown menus and other UI elements that can extend beyond the scope of the modal - like a custom date picker wait).

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

.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
}

<div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

这影响（当前的）Firefox，Safari，Chrome和Opera。有趣的是，在IE10中，如果您取消注释IE10供应商前缀的CSS，它的行为确实是正确的 - 我还没有在IE11中进行测试，但假设行为与IE10相匹配。

这是示例代码的链接（高度简化）

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

Answer 1

I only used 3 containers to achieve this effect. The trick is to separate the flexbox container from the container that controls the scrolling. Finally, put everything into a root container to center it. Here are the key styles needed to create the effect:

.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;
}

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

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

Answer 2

question

Flexbox makes centering very easy.

Just apply align-items: center and justify-content: center to the flex container and your flex items will be centered vertically and horizontally.

However, there is a problem with this approach when the flex items are larger than the flex container.

As pointed out in the question, when flex items overflow the container, the top becomes inaccessible.

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

Here is an example of a LTR container with justify-content: center and three flex items:

See the bottom of this answer for a description of this behavior.

---

Solution #1

To resolve this issue, use flexbox auto-margins instead of justify-content.

Using auto margins, overflowed flex items can be centered vertically and horizontally without losing access to any part of them.

So, don’t use this code on a 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 by most browsers)

Add the safe value to your keyword alignment rules as follows:

justify-content: safe center

or

align-self: safe center

From CSS Box Alignment Module Specification:

Note: The Box Alignment module works with multiple box layout models, not just flex. So, in the specification excerpt above, the terms in square brackets are actually "alignment body", "alignment container", and "start". I'm using flex-specific terms to keep the focus on this particular issue.

---

Scroll limit description from MDN: