Css Flexbox：为什么flex没有增长'；不能使用固定宽度的兄弟姐妹？

考虑以下HTML和CSS：

<div class="wrapper">
  <div class="first">The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement .</div>
  <div class="second"></div>
</div>
<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>


.wrapper {
  display: flex;
  border: 1px solid black;
  width: 300px;
  height: 100px;
  margin-top: 30px;
}
.first {
  flex-grow: 1;
  background-color: #aaa;
}
.second {
  width: 80px;
  background-color: #ddd;
}

CSS3 Flexible Box或flexbox是一种提供布局的布局模式。
.包装纸{
显示器：flex；
边框：1px纯黑；
宽度：300px；
高度：100px；
边缘顶部：30px；
}
.首先{
柔性生长：1；
背景色：#aaa；
}
.第二{
宽度：80px；
背景色：#ddd；
}

结果如下：

为什么第一个包装不尊重

。第二个
的
宽度：80px

如何使用flexbox解决该问题

您需要使用
flex:1而不是
flex-grow:1



另外，我想指出的是，flexbox的支持对于IE来说并不好，所以如果有人对类似的布局感兴趣，并且有更兼容的选项，那么

<div class="wrapper">
    <div class="second"></div>
    <div class="first"></div>
</div>


.wrapper {
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin-top: 30px;
}

.wrapper .first {
    background: red;
    height: 100%;
    margin-right: 80px;
}

.wrapper .second {
    height: 100%;
    width: 80px;
    float: right;
    background: blue;
}


.包装纸{
边框：1px纯黑；
宽度：300px；
高度：100px；
边缘顶部：30px；
}
.包装器，首先{
背景：红色；
身高：100%；
右边距：80px；
}
.wrapper.第二{
身高：100%；
宽度：80px；
浮动：对；
背景：蓝色；
}

（注意，我在DOM中交换了
div
的顺序）
或第二个div上的
flex-shrink:0
。@Paulie\u D即使这样也足够了，但这会节省一个额外的属性：）
<div class="wrapper">
    <div class="second"></div>
    <div class="first"></div>
</div>


.wrapper {
    border: 1px solid black;
    width: 300px;
    height: 100px;
    margin-top: 30px;
}

.wrapper .first {
    background: red;
    height: 100%;
    margin-right: 80px;
}

.wrapper .second {
    height: 100%;
    width: 80px;
    float: right;
    background: blue;
}