CSS flex grow 不适用于在顶部添加 div

CSS flex grow does not work with added div on top

考虑以下 fiddle:https://jsfiddle.net/7naxprzd/1/

要求是:

如果通过删除 div 和 class .arrow-wrapper 来消除箭头,代码可以正常工作,但我需要箭头。

一个解决方案可能是对箭头进行绝对定位,但是有没有办法在不对箭头进行绝对定位的情况下使用 flex 解决此布局问题?

应该适用于现代浏览器和 IE11。

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}
<div class="row-wrapper">
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">Please align tops.</div>
      <div class="contents">Let me grow.</div>
    </div>
  </div>
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">please align tops.</div>
      <div class="contents">Let me grow.<br>Please<br>align<br>bottoms.</div>
    </div>
  </div>
</div>

在您的 div 中使用 class col-wrapper-outer,而不是:

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

使用这个:

.col-wrapper-outer {
  display: flex;
  flex-direction: column;
}

然后将 flex: 1 添加到 .col-wrapper 使其占据容器的整个高度。

revised fiddle

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;    /* NEW */
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  flex: 1;                   /* NEW */
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}
<div class="row-wrapper">
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">Please align tops.</div>
      <div class="contents">Let me grow.</div>
    </div>
  </div>
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">please align tops.</div>
      <div class="contents">Let me grow.
        <br>Please
        <br>align
        <br>bottoms.</div>
    </div>
  </div>
</div>