IE11 flexbox容器不会增长

Question

请考虑以下代码段：

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 3px solid red;
}
.action {
  flex-basis: 100%;
  flex-shrink: 1;
  width: 100%;
}
.button {
    font-size: 12px;
    line-height: 3rem;
    width: 100%;
}

<div class="container">
  <div class="action">
    <button class="button" type="button">
      Button label 1
    </button>
  </div>
  <div class="action">
    <button class="button" type="button">
      Button label 2
    </button>
  </div>
</div>

在Chrome浏览器中，按钮垂直显示，并且容器逐渐增大以适应它们：

但是，在IE11中，按钮重叠并且容器保持小于1个按钮：

这是IE中的已知错误吗？ （如果是，将不胜感激指针）

是否存在已知的解决方法？

Answer 1

好的，我知道了！问题是const mongoose = require('mongoose'); const config = {}; const {DB_CONNECT} = process.env; const myPlugin = schema => { console.log('done'); // this line is not logged at all schema.methods.mymethod = () => {}; } const connectAndAddPlugins = async () => { await mongoose.connect( DB_CONNECT, {...config} ); mongoose.plugin(myPlugin) }; const loadModels = () => { const model = mongoose.model('Cat', { name: String }); } connectAndAddPlugins(); loadModels(); 。我相信这正是您要寻找的内容（无需更改html）：

align-items: center;

旁注： 我知道VM框显示MSEdge Win10预览，但这确实是IE11。较深的蓝色“ e”图标是MS Edge。我不得不打开记事本并制作一个本地HTML文件，因为Codepen不能与IE 11一起使用，也不在乎修复我的缩进。