Making vertical scroll bar for top layer

[joon1]

if you click menu2 at http://form.kr/q/swap/154/, menu2 element will be shown.
Since the menu2 element is very long, the vertical scroll bar helps for reading the end of the menu2 element.

However at http://form.kr/q/swap/153/, users cannot read the end of the menu2 element because center block “buttonWrap” is fixed.

Can I make the end of the menu2 element at http://form.kr/q/swap/153/ to be shown with your help although menu2 element is vertically more longer than main contents?

Because the buttonWrap is fixed, making the vertical scroll bar for menu2 element seems illogical.
Making a vertical scroll bar inside the menu2 element is, I think, the only way for reading the end of the menu2 element.

[PaulOB]

Elements that are fixed positioned do not scroll with the document. Therefore you should really ensure that all fixed positioned elements do not poke out of the viewport in any direction.

In your example its a bit awkward the way it is set up so needs a bit of a magic number fix (although I dislike magic numbers they are sometimes the only solution unless you can change the whole design).

.menu1,.menu2,.menu3{
max-height:calc(100vh - 170px);
overflow:auto;
}

[Erik_J]

@joon1

Can I make the end of the menu2 element… …to be shown

Yes you can, on both examples you link to.

Try add these rules in the “show” class’ rule-block:

.show{
    transform: scale(1);
    opacity: 1;
    z-index: 2;
    top: 100%;
    pointer-events: initial;
    overflow: auto; /* add */
    max-height: calc(98vh - 100%); /* add */
    white-space: nowrap; /* add */
]

[PaulOB]

@Erik_J

max-height: calc(98vh - 100%); /* add */

Good idea Erik that solves the magic number fix nicely :).

I would suggest that to avoid any clipping at certain heights we need to make it 100% certain and remove the top position from button wrap and its top margin also. If a little more padding is added we can get the same positioning and in that way we can be sure the dropdown never gets clipped by the viewport.

#button-wrap {
  position: fixed;
  max-width: 50rem;
  margin: 0 auto;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
  top: 0;
}

The 98 could then be changed to 99 and still not clip the viewport but still allow the shadow to show underneath.

.show{
    transform: scale(1);
    opacity: 1;
    z-index: 2;
    top: 100%;
    pointer-events: initial;
    overflow: auto; /* add */
    max-height: calc(99vh - 100%); /* add */
    white-space: nowrap; /* add */
]