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

1,778 阅读2分钟

问题图表现如下:

1.png 而我们期待的效果是倒计时的背景宽度由内容自动撑开,而不是这么丑的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 问题就解决了