Oneline horizontal list with middle item that fits its content width

Question

I have a horizontal list of items, arranged with display:table-cell.

The middle item can vary in content length, and it should expand accordingly. And obviously its siblings should shrink to make space to it.

Here is a sample of what I did until now:

http://codepen.io/Pictor13/pen/mJoyXw

But the middle item still overflows over the right sibling, when the content grows.

Is it possible to achieve what I want? Are display: table-cell and white-space: nowrap the right approach?

Note: the width, if specified, should always be generic and not fixed to a specific px/em.

Answer 1

Wellll....flexbox can do that.

.container {
  background-color: yellow;
  padding: 1px;
}
li {
  text-align: center;
  border: 2px solid #ccc;
  background-color: green;
  color: red;
  list-style: none;
}
ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 3px;
  background-color: brown;
}
li {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
input {
  width: 270px;
  width: inherit;
}
form {
  background-color: blue;
  margin: 0;
  padding: 0;
}

<div class="container">
  <ul class="list">
    <li>B</li>
    <li>C</li>
    <li class="middle">
      <form>
        <input type="number" value="123123418190238901390812903823" min="1" max="123012301232138192738798127398712983" />
        <span>to page and with some long  content</span>
        <button>go</button>
      </form>

    </li>
    <li>E</li>
    <li>A</li>
  </ul>
</div>

Codepen Demo