Expand multiple flexbox items to fit container width

Question

I have a layout where I want to make the breadcrumb trail use up all of the available space in the row. In the same row I also have a div (.tools) which needs to be of a dynamic width as it's contents may vary.

At the moment I have to set the breadcrumb trail to a % width to get it to work roughly correctly, but this isn't ideal... I'd like it to just expand to fill the available space.

Any ideas?

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: lightgreen;
  width: 100%;
  box-sizing: border-box;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  width: 55%;
  background-color: lightblue;
}

.breadcrumbItem {
  display: flex;
  flex: 0 10 auto;
  min-width: 45px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbItem button {
  border: 0;
  background: none;
  padding: 0 5px;
  flex: 0 1 auto;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools {
  display: flex;
  justify-content: flex-end;
  background-color: lightyellow;
}
.tools span, .tools button {
  white-space: nowrap;
}

<header>
  <div class="breadcrumb">
    <div class="breadcrumbItem">
      <button>Really long breadcrumb item here</button>
      <span>
        <span>></span>
      </span>
    </div>
    <div class="breadcrumbItem">
      <button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
    </div>
  </div>
  <div class="tools">
    <span>0 photos selected</span>
    <button>Button</button>
  </div>
</header>

https://codepen.io/anon/pen/NYaQyV

score 4 · Accepted Answer · answered Mar 26 '18 at 17:04

4

You can use flex-grow: 1; or the shorthand flex: 1; along with min-width or overflow.

.breadcrumb {
  ...
  flex: 1;
  min-width: 0;
}

Or

.breadcrumb {
  ...
  flex: 1;
  overflow: hidden;
}

CodePen

answered Mar 26 '18 at 17:04

Stickers

75,527
23
147
186

Simple and to the point, thanks! Now just need to do some research to understand why min-width does the trick :) – richwol Mar 27 '18 at 08:14

score 1 · Answer 2 · answered Mar 26 '18 at 16:47

you can achieve what you want with by adding flex: auto to the .breadcrumb selctor block. a lot of your css declarations are redundant. you need to look into them and group selectors having much declarations in common

header {
  -webkit-display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: lightgreen;
  width: 100%;
  box-sizing: border-box;
}
.breadcrumb {
  flex: auto; //note this line .you can change it to auto as well
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  background-color: lightblue;
}
.breadcrumbItem {
  flex: auto;
  min-width: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
}

score 1 · Answer 3 · answered Mar 26 '18 at 21:27

There's a lot of redundancy in your code. Here's a simplified version that may achieve your goals.

header {
  display: flex;
  padding: 16px 20px;
  background-color: lightgreen;
}
.breadcrumb {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  background-color: lightblue;
}
.breadcrumbItem {
  display: flex;
}
button {
  border: 0;
  background: none;
  padding: 0 5px;
}
.breadcrumbItem:last-child {
  overflow: hidden;
}
.breadcrumbItem:last-child button { /* ellipsis on second button only */
  overflow: hidden;
  text-overflow: ellipsis;
}
.tools {
  margin-left: auto;
  background-color: lightyellow;
}
* {
  box-sizing: border-box;
  white-space: nowrap;
}

<header>
  <div class="breadcrumb">
    <div class="breadcrumbItem">
      <button>Really long breadcrumb item here</button>
      <span>
        <span>></span>
      </span>
    </div>
    <div class="breadcrumbItem">
      <button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
    </div>
  </div>
  <div class="tools">
    <span>0 photos selected</span>
    <button>Button</button>
  </div>
</header>

revised codepen

Great answer thanks, really useful to see the simplicity as well. Unfortunately all 3 answers are basically the same so I didn't know which one to pick.. just went for the one that is clearest for anyone hunting for answers in the future. Thanks for your efforts — richwol, Mar 27 '18 at 08:16
No problem. Glad you found a solution. Also, here's the explanation for the `min-width` problem: https://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Mar 27 '18 at 11:37

Expand multiple flexbox items to fit container width

3 Answers3