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.

Yacov

Answer 1

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>

Neighbors

As you suggested, you can use the css property flex-basis: 350px; instead of flex: 0 0 350px; in both left and right columns. :) – Kaoliang

@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: https://mcmap.net/q/37734/-what-are-the-differences-between-flex-basis-and-width – Oriel