css:flex纵向布局下，子元素宽无法根据内容自撑开适应问题

问题图表现如下：

而我们期待的效果是倒计时的背景宽度由内容自动撑开，而不是这么丑的100%；

而肯定又有人说了，那不用flex布局不就得了！！！！

但是追求界面更美观的我，希望在不同的屏幕高度下，榜单的body高度是能够占据最大高度的；也就是其必须是自动grow到剩余空间；简单抽离结构示意如下：

<div class="wrap">
    <div class="time>倒计时：{{ cutdown }}</div>
    <div class="rank-wrap">
        <div class="rank-header"></div>
        <div class="rank-body"></div>
        <div class="rank-footer"></div>
    </div>
</div>

有上述布局，warp高度为全屏高度，除去time后，希望rank-wrap的高度自动占据剩余高度； time因为cutdown长度不一定，可能是x天x时x分x秒也可能是xx秒，所以希望整个盒子宽度根据内容自动撑开；

所以样式设置如下

<style lang="stylus" scoped>
.wrap
  width 9.88rem
  height 100%
  margin-left 1.75rem
  display flex
  flex-direction column
.time
  background-color rgba(0, 0, 0, 0.2)
  border-radius 0.16rem
  padding 0.04rem 0.2rem
  flex-shrink 0 // 此处必须设置这个，否则在底部内容过高时，会被压缩
.rank-wrap
  width 100%
  height 100%
  padding-top 0.1rem
  flex-grow 1
  overflow hidden // 此次必须设置该属性，否则，在rank-body内容会溢出而不是滚动
.rank-header
  w-h(9.6rem,0.36rem)
  background-color rgba(76, 52, 167, 0.6)
  border-radius 0.08rem
  flex-shrink 0
.rank-body
  width 9.6rem
  overflow-y scroll // 结合父元素的`overflow hidden`才能生效
  margin-top 0.06rem
  flex-grow 1
  max-height 100%
.rank-footer
  bg-size(9.88rem,1rem,'rank_bottom')
  flex-shrink 0
<style>

这时，发现time的半透明背景宽度变成了和父元素一致的宽度，而不是自动填充撑开，与需求不符； 我们知道，一个div默认会占据一行，在没有flex布局时，将time设置成inline-block即可实现自适应自身内容的需要；

但是当给父元素加了flex布局后，该设置即失效；

原因及解决方案： flex的主轴设置成纵轴时，水平轴方向就失去了影响；因此我们只要给time增加水平轴方向的影响即可；即align-self: flex-start 问题就解决了