Limit width of flex item regardless of content

Question

I'm having a hard time explaining my problem, have a look

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

What I need is

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

Basically cut off the text no matter how long it is and keep it on 1 line. I just can't wrap my head around what I'm messing up... I tried overflow, text-overflow, word-wrap, word-break, white-space - no luck.

Use `white-space:nowrap;` to keep text in one line when there are spaces. — Stickers, Jan 22 '18 at 16:24

score 2 · Accepted Answer · answered Jan 22 '18 at 16:15

The reason this occur is based on the fact that flex row item's min-width defaults to auto.

This mean that it can be smaller than its content, hence the content in a will overflow its parent, and with that also push the button along with it.

The solution is to either set min-width to 0, or use overflow with a value other than visible.

In this case the overflow will work better, as seen in below sample, as when using min-width the overflowed text will be visible.

Stack snippet

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

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

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

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

<div class=a>
  <div class=b2>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

score 0 · Answer 2 · answered Jan 22 '18 at 15:31

You can achieve this with a max-width and an overflow-hidden in the B element.

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
  max-width: 200px;
  overflow: hidden;
}

You can add another element and a max-height to item b so that horizontal scrolling is hidden and all text can be selected.

https://jsfiddle.net/pk7etoka/

score 0 · Answer 3 · answered Jan 22 '18 at 15:46

You can try this as well:

body { width: 200px }

.a {
  border: solid 1px black;
  display: flex;
}

.b {
  flex: 1;
  overflow-x:auto;
  max-width:200px;
}

<div class=a>
  <div class=b>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
  <button>
    click
  </button>
</div>

You can also use the other overflow methods like overflow:hidden/scroll as per your requirement.

Limit width of flex item regardless of content

3 Answers3