Internet Explorer 不会使用 flex-direction: 列扩展 flexbox [英] Internet Explorer doesn't expand a flexbox with flex-direction: column

问题描述

我正在尝试创建一个带有静态标题和正文的容器，该正文根据其内容扩展到最大高度.达到最大高度后，主体应滚动.我编写的代码在 Chrome/Firefox 中运行良好，但在 IE 中，容器无法正确扩展.

div{边框:1px 实心#DDD；}.容器{最大高度:150px；显示:弹性；弹性方向:列；}.header{高度:40px；}.滚动{弹性:1；溢出:自动；}

<div class="header">标题
<div class="scroll"><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div>

如果我使用 flex-direction: row; 代替，高度会适当扩展，但显然我的标题看起来不正确.

是否有一种解决方法可以使带有标题和滚动正文的不断增长的容器与 IE11 和 Edge 一起使用?如有必要，我不反对放弃 flexbox.

解决方案

看来这段代码在 Chrome、Firefox 和 Edge 中按预期工作.问题似乎是 IE11.

这是一种似乎适用于所有四种浏览器的解决方案:

• 使 body 元素成为一个弹性容器.
• 对原始代码做一个调整(添加width: 100%).

html {高度:100%；}身体 {显示:弹性；高度:100%；边距:0；}.容器 {最大高度:150px；显示:弹性；弹性方向:列；宽度:100%；/* 调整 */}.header {高度:40px；}.滚动{弹性:1；溢出:自动；}div {边框:1px 实心#DDD；}

<div class="header">标题
<div class="scroll"><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div><div>滚动</div>

jsFiddle

I'm trying to create a container with a static header and a body that expands based on its contents up to a maximum height. After the maximum height is reached, the body should scroll. I've written code that works great in Chrome/Firefox, but in IE, the container doesn't expand correctly.

div{
  border: 1px solid #DDD;
}

.container{
  max-height: 150px;
  display: flex;
  flex-direction: column;
}

.header{
  height: 40px;
}

.scroll{
  flex: 1;
  overflow: auto;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

If I use flex-direction: row; instead, the height expands appropriately, but obviously my header doesn't look right then.

Is there a workaround to get a growing container with a header and scrolling body to work with IE11 and Edge? I'm not opposed to abandoning flexbox if necessary.

解决方案

It appears this code works as intended in Chrome, Firefox and Edge. The problem appears to be IE11.

Here's one solution that appears to work on all four browsers:

• Make the body element a flex container.
• Make one adjustment to the original code (add width: 100%).

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  margin: 0;
}
.container {
  max-height: 150px;
  display: flex;
  flex-direction: column;
  width: 100%;  /* adjustment */
}
.header {
  height: 40px;
}
.scroll {
  flex: 1;
  overflow: auto;
}
div {
  border: 1px solid #DDD;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="scroll">
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
    <div>scroll</div>
  </div>
</div>

jsFiddle

这篇关于Internet Explorer 不会使用 flex-direction: 列扩展 flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！