Html 更改宽度值不会改变'；你不能改变宽度吗？

我有3个“窗格”或列并排。我希望中间的

.mid窗格

占据大部分空间。但是更改任何宽度值似乎都没有任何作用。我说宽度：10px并且什么也没发生。发生什么事？

body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
梅因迪夫先生{
身高：100%；
填充：0；
}
.集装箱{
显示器：flex；
}
.container>div{
弹性：1；
/*成长*/
}
.左窗格{
宽度：100px；
身高：100%；
背景色：#5897fb；
}
.中窗格{
宽度：80%；
身高：100%；
保证金：0；
填充：10px；
}
.右窗格{
宽度：100px；
身高：100%；
背景色：#ffefefef；
}

---

您可以在CSS下面更改它以使用它。赋予Flexgrow属性将产生神奇的效果

.

/** comment this
  * container > div {
  * flex: 1; /*grow*/
  * } */

.left-pane {
    flex: 1;
    height: 100%;
    background-color: #5897fb;
}
.mid-pane {
    flex: 2;
    height: 100%;
    margin: 0;
    padding: 10px;
}
.right-pane {
    flex: 1;
    height: 100%;
    background-color: #ffefef;
}

---

删除

flex:1/*从
.container>div
中删除
flex:1
。