<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="horizontal-medias">
<button class="btn btn-default newBtn clearfix">
<i class="fa fa-plus fa-2x pull-left"></i>
</button>
<button ng-repeat="btn in buttons" class="btn btn-default">
<i class="fa fa-file-word-o fa-2x"></i>
<div class="flex-group">
<span>Uzun Dosya Adı 1<br>10 KB</span>
</div>
</button>
</div>
</div>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.buttons = [
{name:"Dosya Adı 1",class:"fa-file-word-o"},
{name:"Dosya Adı 1",class:"fa-file-word-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-archive-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-pdf-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-movie-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-powerpoint-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-audio-o"},
{name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-image-o"}
]
})
</script>
.horizontal-medias{
overflow:auto;height:80px;white-space: nowrap; border:1px solid #f3f3f3;
}
.horizontal-medias button{
height:50px;
max-height:50px;
min-height:50px;
display: inline-flex;
}
.horizontal-medias button i{
margin-top:5px;
margin-right:7px;
}
.horizontal-medias button i,
.horizontal-medias button div.flex-group{
display: inline-flex;
text-align:left;
}
.horizontal-medias button:not(.newBtn){
width:220px;
max-width:220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.horizontal-medias::-webkit-scrollbar {
width: 1em;
height:9px;
}
.horizontal-medias::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.horizontal-medias::-webkit-scrollbar-thumb {
background-color: #ccc;
outline: 1px solid slategrey;
}
