因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.
我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)
但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).
这是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-x: auto;
}
.modal-container .modal-window {
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// Optional support to confirm scroll behavior makes sense in IE10
//-ms-flex-direction: column;
//-ms-flex-align: center;
//-ms-flex-pack: center;
height: 100%;
}
.modal-container .modal-window .modal-content {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 500px; …我必须忘记我的垂直和水平居中的flexbox的基本内容.
容器位于具有垂直滚动的父级内,当容器变得太高时,它会超出父级顶部,剪切内容.底部保持不变.
尝试调整视图的高度或添加更多行以查看其运行情况.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
}
#box {
margin: 30px 0;
background: white;
border: 1px solid #dfdfdf;
}<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>如何防止它被剪裁？另外,我试图在容器上方和下方有30px的边距.
谢谢!
我试图justify-content: flex-end;在 IE11 中为溢出隐藏的 DIV 内容工作，但没有成功。
在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段：
.token-container {
width: 200px;
white-space: nowrap;
overflow: hidden;
padding: 5px;
box-shadow: 1px 1px 2px 1px silver inset;
display: flex;
flex-direction: row;
justify-content: flex-end;
//align-content: flex-end;
}
.token {
display: inline-block;
border: 1px solid silver;
margin: 1px 3px 0 0;
border-radius: 4px;
height: 19px;
padding: 0 3px;
}<div class="token-container">
<div class="token">
<span class="token-text">t-bone</span>
</div>
<div class="token"><span class="token-text">hamburger</span></div>
<div class="token"><span class="token-text">pancetta</span></div>
<div class="token"><span class="token-text">leberkäs</span></div>
<div class="token"><span class="token-text">bacon</span></div>
</div> …