Question

我在这里有一个Codepen-https://codepen.io/anon/pen/ePWJGE

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

在我的Codepen的第二个容器中，我希望灰色条的最大宽度为300px，其余元素在重新折叠空间中均匀间隔。

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

Answer 1

代替将sub添加到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;
  }
}

CSS-flex，最大宽度

1 个答案: