CSS buttons align for all divs except the last one

Question

I want to display all buttons aligned to fill full div width , except for the last one. My code is below, but the last div is short and is expanding full width, I don't want this for the last one.

NOTE: The buttons are dynamically generated.

 .block { width: 400px; display: flex; flex-wrap: wrap; } .button { background-color: #cec; border: none; color: white; margin: 15px; padding: 15px; display: inline-block; font-size: 16px; flex: 1 0 auto; }

 <div class="block"> <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a> </div> <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a> </div> <div class="button"><a href="#">#3 - SOME TEXT HERE</a> </div> <div class="button"><a href="#">#4 - SHORT TEXT</a> </div> <div class="button"><a href="#">#5 - SHORT</a> </div> <div class="button"><a href="#">#6 - SHORT</a> </div> </div>

Answer 1

You can have separate classes for the short ones.

 .block { width: 400px; display: flex; flex-wrap: wrap; } .button { background-color: #cec; border: none; color: white; margin: 15px; padding: 15px; display: inline-block; font-size: 16px; flex: 1 0 auto; } .short { max-width: 20vw; }

 <div class="block"> <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a> </div> <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a> </div> <div class="button"><a href="#">#3 - SOME TEXT HERE</a> </div> <div class="button"><a href="#">#4 - SHORT TEXT</a> </div> <div class="button short"><a href="#">#5 - SHORT</a> </div> <div class="button short"><a href="#">#6 - SHORT</a> </div> </div>

Answer 2

You can use :last-child selector, it matches every element that is the last child of its parent.

.button:last-child

Or you can also use nth-last-child(1) because nth-last-child(1) equal to last-child selector

.button:nth-last-child(1)

Answer 3

You can use last-child pseudo-class to target the last element only of you button class.

.button:last-child {
  max-width: max-content;
}

Working Example:

 .block { width: 400px; display: flex; flex-wrap: wrap; } .button { background-color: #cec; border: none; color: white; margin: 15px; padding: 15px; display: inline-block; font-size: 16px; flex: 1 0 auto; } .button:last-child { max-width: max-content; }

 <div class="block"> <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a> </div> <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a> </div> <div class="button"><a href="#">#3 - SOME TEXT HERE</a> </div> <div class="button"><a href="#">#4 - SHORT TEXT</a> </div> <div class="button"><a href="#">#5 - SHORT</a> </div> <div class="button"><a href="#">#6 - SHORT</a> </div> </div>