Fill remaining horizontal width without a fixed width

Question

I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS.

I'm trying to float text with a variable width next to span which I want to fill the remaining space.

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list span {
  font-size: 14px;
  float: l margin: 0px 5px;
}
span.filter-pill {
  border-radius: 4px;
  width: 100%;
  margin-left: 12px;
  height: 10px;
  display: inline-block;
}

<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

JSFiddle - https://jsfiddle.net/1466qdab/

Note with the width set to 100% it falls to the line under.

Stickers · Accepted Answer · 2016-04-05T14:29:28.177

2

If you're willing to use flexbox, it can be pretty easy:

ul#filter-list a {
  display: flex;
}

In addition, use align-items: center; for centering vertically.

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list a {
  display: flex; /*added*/
  align-items: center; /*added*/
}
ul#filter-list span {
  font-size: 14px;
  margin: 0px 5px;
}
span.filter-pill {
  flex: 1; /*added*/
  border-radius: 4px;
  margin-left: 12px;
  height: 10px;
}

<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

edited Apr 05 '16 at 14:29

answered Apr 05 '16 at 14:11

Stickers

75,527
23
147
186

Aha I've not seen flexbox before, that works almost perfectly the only issue is long titled names like the one in the example break onto a new line. Is there a way to force the text to stay on a single line? – archvist Apr 05 '16 at 14:17
Well you can remove `width:100%;` from `span.filter-pill`, and add `flex:1`. – Stickers Apr 05 '16 at 14:19
Thats perfect, I'll look into flex more for the future. thanks! – archvist Apr 05 '16 at 14:21
1

Thanks for the reminder @andyjones added link to the support tables. – Stickers Apr 05 '16 at 14:31

Fill remaining horizontal width without a fixed width

1 Answers1