Piyuesh Piyuesh - 5 months ago 16
CSS Question

Make inner div width dynamic

I want to give remaining width to .inner div. At the Same time it's siblings (a & span tags) can be of dynamic width.

Any idea?
Code below & at 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>





Thanks

Answer

Solution using 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>