Josh Smith Josh Smith - 1 month ago 5
CSS Question

div to fill the remaining space

I have this sample:

link

CODE HTML:

<div class="row">
<div class="col-md-push-8 col-md-4 small-menu">
<a href="#" class="orange-menu">List your Property</a>
<ul class="list-inline">
<li><a href="#">Travelor Login</a></li>
<li><a href="#">Owner Login</a></li>
</ul>
</div>
</div>


CODE CSS:

.small-menu .orange-menu {
background: #ed7103;
font-size: 18px;
padding: 18px;
font-weight: 500;
}
a{
display: inline-block;
}
.small-menu .list-inline {
overflow: auto;
background: rgba(31,106,138,0.7);
margin: 0px;
vertical-align: bottom;
display: inline-block;
padding: 14px;
}


How can I make div
(".small-menu .list-inline")
to occupy all the remaining space until the end?

I want to keep elements of the same height and position

Can you help me to solve this problem?

Thanks in advance!

Answer

Flexbox can do that:

.small-menu {
  display: flex;
  align-items: flex-end;
}
.small-menu .orange-menu {
  background: #ed7103;
  font-size: 18px;
  padding: 18px;
  font-weight: 500;
}
.small-menu .list-inline {
  overflow: auto;
  background: rgba(31, 106, 138, 0.7);
  margin: 0px;
  vertical-align: bottom;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-push-8 col-md-4 small-menu">
    <a href="#" class="orange-menu">List your Property</a>
    <ul class="list-inline">
      <li><a href="#">Travelor Login</a>
      </li>
      <li><a href="#">Owner Login</a>
      </li>
    </ul>
  </div>
</div>