Сделать внутреннюю ширину div динамической

Question

Я хочу дать оставшуюся ширину .inner div. В то же время это братья и сестры (& теги span) могут иметь динамическую ширину.

Любая идея? код ниже & в https://jsfiddle.net/pge8rqw0/

.top {} .inner { 
 
    border-bottom: 1px solid black; 
 
    background-color: green; 
 
    width: auto; 
 
    float: left; 
 
    width: 50px; 
 
} 
 
a { 
 
    float: left; 
 
} 
 
span { 
 
    float: right; 
 
    background-color: red; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <div class="inner"></div> 
 
    <span>Html is good</span> 
 
</div>

Спасибо

Answer 1

Решение с помощью display: flex.

.top { 
 
    display: flex; 
 
} 
 
.inner { 
 
    border-bottom: 1px solid yellow; 
 
    background-color: green; 
 
    min-width: 50px; 
 
    flex: 1; 
 
} 
 
a { 
 
    background-color: #f5f5f5; 
 
} 
 
span { 
 
    background-color: red; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <div class="inner"></div> 
 
    <span>Html is good</span> 
 
</div>

Answer 2

Если вы можете изменить порядок элементов в коде, то вы можете достичь его без flex следующим образом:

.top {overflow: hidden;} 
 
a { 
 
    float: left; 
 
} 
 
span { 
 
    float: right; 
 
    background-color: red; 
 
} 
 
.inner { 
 
    border-bottom: 1px solid black; 
 
    background-color: green; 
 
    overflow: hidden; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <span>Html is good</span> 
 
    <div class="inner">Inner Content</div> 
 
</div>