Making 2 spans to expand to fit into li width

Question

I want my two span to expand to fit into my li element.

In the original project I use bootstrap and jquery too, but as example this will be enough:

http://jsfiddle.net/d5pc8Lp3/

<ol>
    <li><span>Element-Name</span><span>></span></li>
    <li><span>I-want-to-fit-like-the-li-width</span><span>></span></li>
</ol>

The first span in the li element is the element name, and the second span is the "navigator".

I want that the first span width fill the rest of the li element.

Answer 1

You can use flexbox:

li {
  display: flex; /* Magic begins */
}
li > :first-child {
  flex-grow: 1; /* Grow to fill available space */
}

ol > li {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  border: 0px;
  margin-top: 15px;
  display: flex;
}
li > span:nth-child(1) {
  margin-right: 3px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  flex-grow: 1;
}
li > span {
  padding: 5px;
  color: #c7c7c7;
  border: 1px #ccc solid;
  background: #fff;
}
li > span:nth-child(1) {
  margin-right: 3px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
li > span:nth-child(2) {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
li > span:nth-child(1):hover {
  border: 1px #1c1c1c solid;
  cursor: pointer;
}
li > span:nth-child(2):hover {
  border: 1px #1c1c1c solid;
  cursor: pointer;
}

<ol>
  <li><span>Element-Name</span><span>&gt;</span></li>
  <li><span>I-want-to-fit-like-the-li-width</span><span>&gt;</span></li>
  <li><span>My-width-doenst-fit</span><span>&gt;</span></li>
</ol>

Answer 2

You could go for calc():

li > span:nth-child(1) {
    margin-right: 3px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    width: calc(90% - 15px);
    display: inline-block;
}

li > span:nth-child(2) {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    width: 10px;
}

http://jsfiddle.net/d5pc8Lp3/3/