代码之家 › 专栏 › 技术社区 › 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>