CODEWITHSUNDEEP
htmlcssflexbox
Omran
Omran

Reputation: 444

Shrink before wrapping a list of buttons

I have a list of buttons in a flex container. Here is the jsfiddle example. 

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}


.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
}


.container>button {
  flex-wrap: nowrap;
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="container">
  <div class="btn-container">
  <Button>
    hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>

I am trying to make the buttons shrink first displaying ellipses then collapse after making the screen smaller in width.

In the example, The buttons shrink only. When I add flex-wrap: wrap to .btn-container they only wrap without shrinking. So how can I make them shrink before wrapping?

Note: When wrapping, I need the buttons to not grow more than their actual width.

Thanks

Upvotes: 2

Views: 341

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

You can approximate this using flex-basis:0 combined with flex-grow. I also rely on max-width: max-content; to limit the grow effect:

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}

.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
  flex-wrap: wrap;
}

.container>button {
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-basis:0;
  flex-grow:1;
  max-width: max-content;
}
<div class="container">
  <div class="btn-container">
    <Button>
    hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>

Upvotes: 2

Related Questions