html - 使 flexbox 元素宽度等于兄弟元素的组合宽度

Question

我有一行固定宽度的 flex 元素，以及一个应该跨越上面组合元素宽度的页脚元素。我该怎么做呢？

这是我目前所拥有的，但是，底行比第一行宽。

<div class="container">
  <div class="container" style="flex-basis: 100%">
    <div style="width: 50px;">Div 1</div>
    <div style="width: 50px;">Div 2</div>
    <div style="width: 50px;">Div 3</div>
  </div>
  <div style="width: 100%">Div 4</div>
</div>

.container {
   display : inline-flex;
   flex-flow: row wrap;
}

.container > div {
    border: 1px solid black;
    background: #ececec;
}

https://jsfiddle.net/y1kham4u/1/

Answer 1

你最好重置flex-direction而不是flex-wrap:

.container {
  display: inline-flex;
  flex-flow: column;/* no wrapping needed */
}

.container .container {
  flex-direction: row;/* reset */
}

.container>div {
  border: 1px solid black;
  background: #ececec;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="container" style="flex-basis: 100% /* not really needed , but does not hurt */">
    <div style="width: 50px;">Div 1</div>
    <div style="width: 50px;">Div 2</div>
    <div style="width: 50px;">Div 3</div>
  </div>
  <div style="width: 100%">Div 4</div>
</div>

https://jsfiddle.net/qm9o27ed/ (还有一个内联网格)