CSS - 弹性，最大宽度答案

【问题标题】：CSS - flex, max-widthCSS - 弹性，最大宽度
【发布时间】：2019-03-15 13:03:39
【问题描述】：

我这里有一个密码笔 - https://codepen.io/anon/pen/ePWJGE

是否可以有一个最大宽度的元素而让其他元素占用剩余空间。

在我的代码笔中的第二个容器中，我希望灰色条的最大宽度为 300 像素，其余元素在剩余空间中均匀分布。

.container{
  border: 1px solid lightgrey;
  max-width: 900px;
}
.row{
  display: flex;
  justify-content: space-between;
  //flex-wrap:wrap;
}

.row-item{
  padding: 10px 5px;
  border-left: 1px solid grey;
}

.row:nth-child(even){
  background: lightgrey;
}

.mobile-nav{
  display: none;
}

.row-item-bar{
  flex-grow: 1;
}

.bar{
  background: lightgrey;
  height: 20px;
  max-width: 300px;
}

@media(max-width: 500px){
  .row{
    display: block;
  }

  .sc-left{
    float: left;
  }

  .sc-right{
    float: right;
  }

  .row-item{
    border-bottom: 1px solid grey;
  }

  .mobile-nav{
    display: inline-block;
  }
}

【问题讨论】：

标签： css flexbox

【解决方案1】：

代替将max-width 添加到.bar 我认为您应该将max-width 添加到.row-item-bar

检查sn-p。

.container{
  border: 1px solid lightgrey;
  max-width: 900px;
}
.row{
  display: flex;
  justify-content: space-between;
  //flex-wrap:wrap;
}

.row-item{
  padding: 10px 5px;
  border-left: 1px solid grey;
}

.row:nth-child(even){
  background: lightgrey;
}

.mobile-nav{
  display: none;
}

.row-item-bar{
  flex-grow: 1;
  max-width: 300px;
  box-sizing: border-box;
}

.bar{
  background: lightgrey;
  height: 20px;
  max-width: 300px;
}

@media(max-width: 500px){
  .row{
    display: block;
  }
  
  .sc-left{
    float: left;
  }
  
  .sc-right{
    float: right;
  }
  
  .row-item{
    border-bottom: 1px solid grey;
  }
  
  .mobile-nav{
    display: inline-block;
  }
}

<div class="container">
  <div class="row">
    <div class="row-item sc-left">
      3456789
    </div>
    <div class="row-item">
      Test Test Test Test Test
    </div>
    <div class="row-item sc-left">
      10/12/73
    </div>
<!--     <div class="row-item row-item-bar">
      <div class="bar"></div>
    </div> -->
   
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="row-item sc-left">
      3456789
    </div>
    <div class="row-item">
      Test Test Test Test Test
    </div>
    <div class="row-item sc-left">
      10/12/73
    </div>
    <div class="row-item row-item-bar">
      <div class="bar"></div>
    </div>
   
  </div>
</div>

【讨论】：