CSS - flex, max-width

Question

I have a codepen here - https://codepen.io/anon/pen/ePWJGE

Is it possible to have an element with max-width and have the other elements take up the remaining space.

In the second container in my codepen I would like the grey bar to have a max-width of 300px and the remaining elements to be spaced evenly in the remianing space.

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

Rajan Benipuri · Accepted Answer · 2018-10-10 15:12:28Z

In place of adding max-width to .bar I think you should add max-width to .row-item-bar

check the snippet.

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

Collectives™ on Stack Overflow

CSS - flex, max-width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related