0

(NOTE - this is different from Can't scroll to top of flex item that is overflowing container, which my previous version of this question was closed as a duplicate of.)

I have a container with:

display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;

If the contents of the container don't fit the height, I want them to center veritically (which justify-content does). If the contents of the container are larger than the height, I want an overflow to show.

Unfortunately (at least in chrome) justify-content:center doesn't respect overflow:auto - even though the scrollbar appears, justify-content "trims" the top of the content, so that you can't scroll up to read it. This is because of the container sitting within a position:absolute container.

https://jsfiddle.net/yqfo8b7L/1/ illustrates the issue.

  • There's a sticky header and footer. The main section contains three columns (sidebars, and a main content section.) As you can see, you cannot see "The top is here" at the start of the first paragraph. This appears to be because the column top is at 0, rather than being offset by the header height.

  • In my app, the overall container (#my-page-container) is the main section in a popup that overlays the whole screen. The popup requires position:absolute so that it can sit on top of the main content in the right position. In the fiddle, removing position.absolute on m#y-page-container "resolves" the issue, but this isn't an option in my app, given the need to position the popup.

  • If you remove justify-content=center from .col, you can see "The top is here" in the first paragraph. However, that removes the nice behavior of the text being centered if there's only one paragraph.

  • This is NOT fixed by margin:auto, as in the stackoverflow linked at top. See https://jsfiddle.net/6p50t4au/ as evidence of that not working.

user717847
  • 695
  • 1
  • 6
  • 16
  • don't repeat the same question if you disagree with the duplicate, edit the old one – Temani Afif Apr 24 '21 at 23:04
  • @TemaniAfif that's not helpful. It specifically told me to repost, and wouldn't let me edit the old one. – user717847 Apr 24 '21 at 23:14
  • @TemaniAfif please stop flagging this question. It's legitimately different. – user717847 Apr 24 '21 at 23:15
  • The duplicate is a correct reference in this case. Your revised fiddle doesn't work, not because the duplicate fails to solve the problem, but because your flex items have only content heights to work with. In other words, there's no free space, so `auto` margins can't do anything. If you give the container some height, so that it "overlays the whole screen", you'll see that it works. https://jsfiddle.net/spgb6j20/ – Michael Benjamin Apr 25 '21 at 02:33

0 Answers0