Flexbox - fluid column with "no wrap" text

Question

I'm trying to set up a flexbox layout with three columns. The left and right columns have a fixed width. The center column has fluid width to fill the available space, but it contains a long text, which should not be wrapped and use ellipsis instead.

Unfortunately, non-wrapped text does not provide ability for a column to take available space and pushes the whole layout beyond borders of a parent element.

img {
    max-width: 100%;
}
#container {
    display: flex;
    max-width: 900px;
}
.column.left {
    width: 350px;
    flex: 0 0 350px;
}
.column.right {
    width: 350px;
    flex: 0 0 350px;
}
.column.center {
   // fluid width required
}

h1 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

<div id="container">
  <div class="column left">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
  <div class="column center">
    <h1>
     This is long text. If overflow use ellipsis
    </h1>
  </div>
  <div class="column right">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
</div>

Link to fiddle: http://jsfiddle.net/2Lp8d80n/

Any help is appreciated.

score 6 · Accepted Answer · answered Jul 13 '16 at 18:10

You can just add flex: 1 and overflow: hidden on .center column.

Also when you set flex: 0 0 350px; there is no need to define width, width is fixed to 350px, or that is flex-basis in this case.

img {
  max-width: 100%;
}
#container {
  display: flex;
  max-width: 900px;
}
.column.left {
  flex: 0 0 350px;
}
.column.right {
  flex: 0 0 350px;
}
.column.center {
  flex: 1;
  overflow: hidden;
}
h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="container">
  <div class="column left">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
  <div class="column center">
    <h1>
     LONG LONG TEXT LONG LONG TEXT LONG LONG TEXT
    </h1>
  </div>
  <div class="column right">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
</div>

As you suggested, you can use the css property `flex-basis: 350px;` instead of `flex: 0 0 350px;` in both left and right columns. `:)` — Ricky Ruiz, Jul 13 '16 at 18:21
@RicardoRuiz, if you use `flex-basis` instead of `flex`, then `flex-shrink` defaults to `1`. But the OP wants `flex-shrink: 0`. As the spec recommends, using the `flex` property is preferable in order to override initial values. See *The `flex-shrink` factor* here: http://stackoverflow.com/a/34355447/3597276 — Michael Benjamin, Jul 13 '16 at 21:07

Flexbox - fluid column with "no wrap" text

1 Answers1