代码之家 › 专栏 › 技术社区 › Yichz

IE11弹性项垂直溢出

internet-explorer-11 flexbox css3 css html

Yichz · 技术社区 · 7 年前

我知道这里的IE问题中有很多flex项溢出,但是我找不到垂直溢出答案的解决方案。

如果您在Chrome中运行,您将看到内容垂直滚动,并带有一个内部滚动条,它尊重 max-height 父母的(预期的)

但是,如果在IE11中运行,它将溢出,而不是创建内部滚动。

有什么想法吗?

编辑:在一点上下文中,我试图创建一个对话框具有自动高度并增长到最大高度的模式,然后在主体中设置内部滚动。类似于 https://material-ui.com/demos/dialogs/#scrolling-long-content . (卷轴=纸张)

不知道他们是怎么做的

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

2 回复 | 直到 7 年前

Hai Pham 7 年前

加上 max-height: calc(100vh - 50px); .body (我假设页眉+页脚=50px)。

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

height: 100% 到 .container (我不知道为什么我创建html文件并在IE中运行时它工作得很好,但在这里的html代码段中不工作)

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
    <div class="header">aa</div>
    <div class="body">
        <div class="content">
            content
        </div>
    </div>
    <div class="footer">ccc</div>
</div>

Yichz 7 年前

玩了一会儿之后,

我只需要补充一下 overflow-y: auto; 到 .container

如果有人感兴趣,我创建了另一个示例:

https://codepen.io/kossel-the-styleful/pen/OaaPyq

推荐文章

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

8 年前

infodev · IE 11使用角度5的兼容性错误

8 年前

godblessstrawberry · 检测角度5中的IE11并抑制“属性不存在”警告

8 年前

Dinesh N.K · Internet Explorer 11-无法选中angular 5中的“输入类型”复选框

8 年前

Tomer · 简单css网格不适用于IE11

8 年前

Kim · 父框未仅在IE中包装

8 年前

curtybear · 在IE11上居中SVG文本,文本定位:中间和对齐基线:中间/中间

8 年前

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

8 年前

CSharpDev · 使用javascript方法窗口打开编码URL时出错。使用Internet explorer打开()。

8 年前

Luke Hammer · 如果浏览器不支持ES6模板文本,则创建错误消息

8 年前