How to place a div at the bottom right of an overflow scroll

Question

I'm trying to place some buttons at the bottom of a "scrolling view", I have seen lots of examples on this, but it doesn't seem to work in my case. So I'll try to explain:

As you can see from the picture above I want to place the "account icons", as in "Bane 1", but when the descriptive text becomes larger than the inner card, the icons seem to stay at 1% from the bottom. I want them to be at the bottom of the "scrollable view". Any ideas on how I can accomplish this?

Thanks :) (code below)

 .task border-bottom: 1px solid #00AA9E &:last-child border-bottom: none .container padding: 0 .reperationstyper float: left background-color: white height: 100% width: 3% .smorring @extend .reperationstyper background-color: #90AB00 .kampagne @extend .reperationstyper background-color: #C14848 .reperation @extend .reperationstyper background-color: #D69966 .taskRow position: relative height: 100% margin-left: 0 overflow: auto .button background: none !important border: none padding-right: 20% float: right .task-content padding-top: 1% p color: gray .buttons padding-top: 2% padding-left: 0 padding-right: 0 .empRow float: right margin-right: -30px margin-left: -30px position: absolute right: 50% bottom: 0.1% .empButton float: right display: inline-block background: none border: none bottom: 1% 

  <div class="container task" [ngStyle]="{'height': 'calc(100% /' + event.task.length + ')'}" *ngFor="let task of event.task; let i = index"> <div class="smorring" *ngIf="event.task[i].TaskType == 0"></div> <div class="kampagne" *ngIf="event.task[i].TaskType == 1"></div> <div class="reperation" *ngIf="event.task[i].TaskType == 2"></div> <div class="row taskRow" style=" height: 100%; width: 97%"> <div class="col-10 task-content" > <h6>{{task.heading}}</h6> <p>{{task.description}}</p> </div> <div class="col-2 buttons"> <button type="button" class="button btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><md-icon class="task-info-button" [ngStyle]="{color: '#00AA9E', 'font-size': '180%'}">assignment</md-icon></button> <div class="container empRow"> <ng-container *ngFor="let employee of task.requiredPersonnel; let i = index"> <button type="button" *ngIf="task.requiredPersonnel[i].type == 1" class="empButton" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><md-icon class="task-info-button" [ngStyle]="{color: '#2CA800', 'font-size': '180%'}">assignment_ind</md-icon></button> <button type="button" *ngIf="task.requiredPersonnel[i].type == 0" class="empButton"><md-icon class="task-info-button" [ngStyle]="{color: '#CC0000', 'font-size': '180%'}">assignment_ind</md-icon></button> </ng-container> </div> </div> </div> </div> 

EDIT: I've make a working plunker, but here the problem doesn't seem to occur, can someone spot the mistake? https://plnkr.co/edit/xfBpmV?p=preview

Answer 1

You have to put min-height

  .fixed-height {
    min-height: 170px;
  }

and give this class to

    <div class="col-md-10 fixed-height">
      <h6>Heading</h6>
      <p>nascetur ridiculus mus.</p>
    </div>

find the updated Plunker