当我将大小缩小到足以溢出时，如何防止模式对话框的顶部和左侧无法访问

Question

我遇到了一些问题，当我将窗口缩小到足以导致溢出时，固定大小的模式对话框的一部分被切断，无法访问。具体来说，如果我把窗户做得很窄，那么左边的部分就会被切掉，无法进入。如果我把它垂直缩短，滚动时顶部的一部分会被切掉，也无法访问。

我将在底部包含一个fiddle，并用一个简单的例子来展示它。基本上，我有一个模态服务，它在fiddle中声明了自己的html和css，并带有"。模态-"；前缀。它有一个固定的大小，占据了整个屏幕，里面有一个bodydiv，用来包装从其他地方传入的对话框，基本上可以是任何大小的对话框(通常是固定的，但由于它使用了几个不同的对话框，所以大小不一(。传入的内容由"表示；。对话框容器"；班有人知道在不破坏我的功能或假设传入对话框的设置大小的情况下解决这些问题的方法吗？我被困了一段时间。小提琴在这里，我想我也需要包括代码，所以它也会在下面：https://jsfiddle.net/zrb42vex/

<div class="modal">
<div class="modal-body">
<div class="dialog-container">
Top
</div>
</div>
</div>
<div class="modal-background"></div>
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
}

.modal-body {
position: absolute;
height: fit-content;
width: fit-content;
background: #fff;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;

z-index: 900;
}

.dialog-container {
height: 500px;
width: 600px;
padding: 20px;
}

代码段：

.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
}
.modal-body {
position: absolute;
height: fit-content;
width: fit-content;
background: #fff;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
}
.dialog-container {
height: 500px;
width: 600px;
padding: 20px;
}

<div class="modal">
<div class="modal-body">
<div class="dialog-container">
Top
</div>
</div>
</div>
<div class="modal-background"></div>

Answer 1

感觉您所描述的是flex。在这里，我放了一些边框和粉红色的背景，只是为了用我添加的一些内容来说明它"；"活着"；。我可以通过使部分内容灵活来增强内容，我对内容做了一些调整。

编辑：更新为在.dialog-container上设置固定大小

.modal {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
border: solid 1px red;
}
.modal-body {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 5px;
border: solid 2px lime;
}
.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffdddd;
opacity: 0.75;
z-index: 900;
}
.dialog-container {
width: 300px;
height: 250px;
display: flex;
flex-direction: column;
/* stack them */
align-items: center;
padding: 20px;
border: solid 3px blue;
}
.home-run {
justify-self: flex-start;
width: 15rem;
height: 4rem;
border: 1px solid #ddffdd;
background-color: #ddddff;
/* align the text in the middle of the div */
display: flex;
align-items: center;
justify-content: center;
}

<div class="modal">
<div class="modal-body">
<div class="dialog-container">
Top of the morning to you I have more fun stuff like this span: <span>I am a span</span>
<div class="home-run">I am a div so I do a div</div>
</div>
</div>
</div>
<div class="modal-background"></div>