如果你在寻找快速复制/粘贴的答案,代码就在这个问题的底部。
我已经试了至少一天了,试着创建一个flexbox对话框来正确地剪辑/滚动它的内容。
基本上我要创造的是:
html - 使用带有滚动区域的flexbox的灵活居中对话框-LMLPHP
对话框覆盖(阴影屏幕)是100vh/100vw,z顺序是坐在页面上任何已存在内容的前面,它设置为显示:居中的flex,因此它的唯一子(对话框)总是坐在页面的中心,无论它是什么大小,实现这一点的2个css规则如下:

.dialogOverlay {
    z-index: 600;
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialogBase {
    position: relative;
    min-width: 120px;
    min-height: 120px;
    max-width: 75%;
    max-height: 75%;
    overflow: hidden;
    background-color: white;
    border: 1px solid black;
    z-index: 601;
}

对话框的大小至少为120px乘以120px,并且不允许增长到页面宽度或高度的75%以上。
这一点都很好,正如预期的那样,一旦对话框达到最大的大小,任何溢出内容都被隐藏。
在“dialogbase”中有一个对话框内容体,它被设置为display:flex,因此它的两个子项(标题栏和内容区域)按行顺序堆叠在一起。
标题栏有固定的高度,也是一个flex容器(因为它有3个子项、标题文本和2个图标)。
剩余的对话框主体是flex:1,因此它使用了剩余的空间,这一切工作得非常好。如果我用内容填充对话框主体,它将强制调整对话框的大小以适应,并在最大大小时隐藏内容。
这些项的css如下:
.dialogContentBody {
    z-index: 602;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

    .dialogContentBody .titleBar {
        background-color: #6e6e6e;
        color: white;
        height: 50px;
        width: 100%;
        border-bottom: 1px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dialogContentBody .bodyContent {
        overflow-y: scroll;
        background-color: yellow;
        flex: 1;
    }

然而,问题是,当Y方向达到最大高度时,我希望正文内容滚动,因为有时添加到“ByDeCybe”内容会导致溢出,但是不管我怎么努力,我无论如何也无法获得溢出来给我滚动条。
目前,我认为body内容可以y滚动,但最终我想实现的是,body内容区域有一个全宽/全高div,它有一个固定宽度的侧栏,flex 1内容区域可以滚动。
到目前为止,我使用的html是:
<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

            <div class="dialogContentOverlay" data-bind="visible: isBlocked">
                <loadspinner params="{fontAwesomeSize: 5}"></loadspinner>
            </div>

            <div class="dialogContentBody">

                <div class="titleBar">
                    <div class="titleContent" data-bind="text: pageTitle"></div>
                    <div class="iconContent okIcon">
                        <i class="fa fa-check-circle" data-bind="click: handleOkButton"></i>
                    </div>
                    <div class="iconContent closeIcon">
                        <i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i>
                    </div>
                </div>

                <div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}"></div>

            </div>

    </div>

</div>

警告是的,因为我在这里使用的是ko组件架构,“bodycontentcomponentname”最终将是我所说的内部内容,并将从独立组件集中注入。但是现在,我们可以想象在这个div中还有其他内容。
我知道的一件事是“溢出:隐藏”绝对值必须保持在“dialogbase”上,因为如果不是的话,所有的东西都会溢出到屏幕的底部。
然而,有趣的是,如果隐藏的溢出被移除,并且允许内容从对话框溢出到屏幕底部,则内容中的任何溢出滚动条仍然无法正常工作。
任何人能提供的任何帮助,或任何使这项工作的想法都是非常感谢的。
肖蒂
更新(大约10分钟后)
Evan如果我将内容缩减为固定高度为500px的以下最简单的情况,则仍然无法使对话框正文滚动:
<style>
    .dialogOverlay {
        z-index: 600;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialogBase {
        position: relative;
        min-width: 120px;
        max-width: 75%;
        overflow: hidden;
        height: 500px;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        z-index: 601;
    }

    .bodyContent {
        background-color: yellow;
        overflow-y: scroll;
    }

</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

        <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
            <h1>Body content, Body Content</h1>
            <p>body content</p>
        </div>

    </div>

</div>

根据micheal_b的答案更新
将100%添加到文档体仍然无法启用滚动条
<style>
    .dialogOverlay {
        z-index: 600;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialogBase {
        position: relative;
        min-width: 120px;
        //min-height: 120px;
        max-width: 75%;
        //max-height: 75%;
        overflow: hidden;
        height: 500px;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        z-index: 601;
    }

    .dialogContentBody {
        z-index: 602;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }


        .bodyContent {
            //padding: 100px;
            //overflow: hidden;
            background-color: yellow;
            flex: 1;
            overflow-y: scroll;
            height: 100%;
        }

            .dialogConAtentBody .bodyContent:empty {
                display: none;
            }
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

            <div class="dialogContentBody">

                <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                    <h1>Test Contnet, Test Content</h1>
                    <p>test content</p>
                </div>

            </div>

    </div>

</div>

更多更新
在micheal b的帮助下,我让容器以固定在500px的高度滚动,不幸的是,即使返回到最小/最大伸缩高度,滚动仍然不起作用。从那时起,我还将容器追溯到html,并且在每个元素上都有一个固定的“height:100%”返回到顶部。
这个不行
<style>
    .dialogOverlay {
        z-index: 600;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialogBase {
        position: relative;
        min-width: 120px;
        min-height: 120px;
        max-width: 75%;
        max-height: 75%;
        overflow: hidden;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        z-index: 601;
    }

    .dialogContentBody {
        z-index: 602;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }


    .bodyContent {
        background-color: yellow;
        flex: 1;
        overflow-y: scroll;
        height: 100%;
    }

    .dialogConAtentBody .bodyContent:empty {
        display: none;
    }
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

        <div class="dialogContentBody">

            <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
                .
                .
                .
                lots of content
                .
                .
                .
            </div>

        </div>

    </div>

</div>

这个是的
<style>
    .dialogOverlay {
        z-index: 600;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialogBase {
        position: relative;
        min-width: 120px;
        max-width: 75%;
        overflow: hidden;
        height: 500px;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        z-index: 601;
    }

    .dialogContentBody {
        z-index: 602;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }


    .bodyContent {
        background-color: yellow;
        flex: 1;
        overflow-y: scroll;
        height: 100%;
    }

    .dialogConAtentBody .bodyContent:empty {
        display: none;
    }
</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

        <div class="dialogContentBody">

            <div class="bodyContent" data-bind="compinent: { name: bodyContentComponentName , params: bodyContentComponentParams}">
                .
                .
                .
                lots of content
                .
                .
                .
            </div>

        </div>

    </div>

</div>

根据micheal b的最后一条评论,绝对和相对位置也放置在两个外部容器上。
最终更新
因此,经过几个小时的挠头,一些愤怒的白板涂鸦,我的同事在这里在英国,一些奇妙的投入,从迈克尔逖b和lgson,解决方案原来是相当简单的描述。
在整个链条上重复你的最小/最大高度
michael_b是第一个意识到这是一个遗传问题的人,因为遗传问题太严重了,以至于有空隙回到了父母那里,在那里100%的高度计算都不见了。
然而,虽然这样做了,但其中有一些缺失的链接。lgson意识到,这些链接实际上是复制了链下的最小/最大规则,因此任何孩子也有一个链上的高度。
我希望我能把这两个回答都标记为答案,但遗憾的是,lgson的答案是最后让事情进展的答案,不幸的是,我不能分享所有代码,但我可以分享以下内容:
外部对话
<style>
    .dialogOverlay {
        z-index: 600;
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        background-color: rgba(0,0,0,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dialogBase {
        position: relative;
        min-width: 120px;
        min-height: 120px;
        max-width: 75vw;
        max-height: 75vh;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        z-index: 601;
        overflow: hidden;
    }

             .dialogBase .titleBar {
                background-color: #6e6e6e;
                color: white;
                height: 50px;
                width: 100%;
                border-bottom: 1px solid black;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .dialogBase .titleBar .titleContent {
                padding-left: 10px;
                font-size: 2.5rem;
                -ms-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }

                .dialogBase .titleBar .iconContent {
                width: 50px; /* Square icons, 50x50 */
                text-align: center;
                font-size: 2.5rem;
            }

                    .dialogBase .titleBar .iconContent.okIcon {
                    color: #449D44;
                    cursor: pointer;
                }

                        .dialogBase .titleBar .iconContent.okIcon:hover {
                        color: #03FF03;
                    }

                    .dialogBase .titleBar .iconContent.closeIcon {
                    color: #C9302C;
                    cursor: pointer;
                }

                        .dialogBase .titleBar .iconContent.closeIcon:hover {
                        color: #FF0600;
                    }

    .bodyContent {
        overflow-y: hidden;
        min-height: 120px;
        max-height: calc(75vh - 50px);
    }

</style>

<div class="dialogOverlay" data-bind="visible: isOpen">

    <div class="dialogBase">

        <div class="titleBar">
            <div class="titleContent" data-bind="text: pageTitle"></div>
            <div class="iconContent okIcon">
                <i class="fa fa-check-circle" data-bind="click: handleOkButton"></i>
            </div>
            <div class="iconContent closeIcon">
                <i class="fa fa-times-circle" data-bind="click: handleCloseButton"></i>
            </div>
        </div>

        <div class="bodyContent" data-bind="component: { name: bodyContentComponentName , params: bodyContentComponentParams}">ANOTHER COMPONENT IS INJECTED HERE</div>

    </div>

</div>

内部对话框标记(注入的组件)
<style>
    .dialogInnerContainer {
        display: flex;
        align-items: stretch;
        -ms-align-content: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }

        .dialogInnerContainer .tabBar {
            width: 60px;
            background-color: orange;
            border-right: 1px solid black;
        }

        .dialogInnerContainer .mainContentArea {
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 120px;
            max-height: calc(75vh - 50px);
        }
</style>

<div class="dialogInnerContainer">

    <div class="tabBar">
        Mini side bar content get's put in here
    </div>

    <div class="mainContentArea">
        Generated main contnet that needs to scroll gets put in here
    </div>

</div>

非常感谢所有对此有意见的人。
肖蒂

最佳答案

更新了标题和侧栏
使用percent和flexbox有时会给您带来不必要的问题。
此示例始终使用视区单位
这是个开始吗?
Fiddle demo, without side bar
Fiddle demo, with side bar

.dialogOverlay {
  z-index: 600;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogBase {
  position: relative;
  background-color: white;
  border: 1px solid black;
  z-index: 601;
  display: flex;
  flex-direction: column
}
.bodyTitlebar {
  background-color: gray;
  color: white;
  height: 50px;
  border-bottom: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}
.bodyWrapper {
  display: flex;
}
.bodySidebar {
  overflow: hidden;
  max-height: calc(75vh - 50px);        /*  compensate for title bar                      */
  width: 100px;
  padding: 5px;
  box-sizing: border-box;
}
.bodyContent {
  overflow-y: scroll;
  min-width: 20px;                      /*  side bar is 100 so we need the extra 20 here  */
  min-height: 70px;                     /*  title bar is 50 so we need the extra 70 here  */
  max-height: calc(75vh - 50px);        /*  compensate for title bar                      */
  max-width: calc(75vw - 100px);        /*  compensate for side bar                       */
  flex:1;
  padding: 5px;
  border-left: 1px solid black;
}

<div class="dialogOverlay">
  <div class="dialogBase">

    <div class="bodyTitlebar">
      Title bar
    </div>

    <div class="bodyWrapper">
      <div class="bodySidebar">
        <h1>Side bar</h1>
        <p>side bar</p>
      </div>

      <div class="bodyContent">
        <h1>Body content Body content </h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
      </div>

    </div>
  </div>
</div>

10-05 20:57
查看更多