时间戳

首页 > 解决方案 > CSS - 弹性，最大宽度

css - CSS - 弹性，最大宽度

问题描述

我在这里有一个 codepen - 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;
  }
}

标签： cssflexbox

解决方案

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

检查片段。

.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>

推荐阅读