【问题标题】:overlay with flexbox and overflow用 flexbox 和 overflow 覆盖
【发布时间】:2022-12-03 18:16:08
【问题描述】:

On a checkout page I make an overlay on top of the website where scroll on body is disabled, but overflow is enabled on the overlay

But if the viewport is smaller the content on the overlay is clipped

How to avoid that?

I already added overflow:auto to the overlay

https://jsfiddle.net/vu4sz89p/1/

<div id=\"overlay\" class=\"active\">
  <div style=\"height:300px; background:white; padding:20px\">
    content
  </div>
</div>

body{
    overflow:hidden;
}

#overlay.active{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
  
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:#fff;
    overflow:auto;
  
    background:yellow;
}

    标签: html css


    【解决方案1】:
    猜你喜欢
    • 2015-03-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-16
    • 2018-10-07
    • 2014-05-23
    • 2021-07-07
    相关资源
    最近更新 更多