css - Flexbox:为什么 flex-grow 不适用于固定宽度的兄弟？

Question

LIVE DEMO

考虑以下 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;
}

结果如下:

为什么第一个包装器不遵守 .second 的 width: 80px？

我如何使用 flexbox 解决这个问题？

PLAYGROUND HERE

Answer 1

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

.first {
    flex: 1;
    background-color: #aaa;
}

Demo

---

此外，我想指出，就 IE 而言，flexbox 支持并不好，所以如果有人对具有更多兼容选项的类似布局感兴趣，那么

<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;
}

Demo (请注意，我调换了 DOM 中 div 的顺序)