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

问题描述

我试图创建一个具有静态标题和主体的容器，该主体基于其内容扩展到最大高度。达到最大高度后，主体应滚动。我编写的代码在Chrome / Firefox中效果非常好，但在IE中，容器无法正确扩展。

  div {border：1px solid #DDD;}。container {max-height：150px;显示：flex; flex-direction：column;}。header {height：40px;}。scroll {flex：1; overflow：auto;}  
 
 < div class = > < div class =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>  
 

flex-direction：row; 相反，高度适当扩展，但显然我的标题看起来不正确。

有一个解决方法，以获得一个增长的容器与标题和滚动主体以使用IE11和Edge？我不反对在必要时放弃flexbox。

解决方案

看起来这个代码适用于Chrome，Firefox和Edge。问题似乎是IE11。

这里有一个解决方案似乎可以在所有四个浏览器上工作：

• 将 body 元素变为flex容器。


• 对原始代码进行一次调整$ c> width：100％）。

  html {height：100％;} body {display：flex;高度：100％; margin：0;}。container {max-height：150px;显示：flex; flex-direction：column; width：100％; / * adjust * /}。header {height：40px;}。scroll {flex：1; overflow：auto;} div {border：1px solid #DDD;}  

 < div class =container> < div class =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

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：column展开flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！