Untitled

<!DOCTYPE html>
<html ng-app="MaterialApp">
  <head>
    <script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular-messages.min.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular-animate.min.js"></script>
    <script src="//code.angularjs.org/1.5.0/angular-aria.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="progress-bar">
      <ul>
        <li>
          Test item</li>
        <li>
          Test item</li>
        <li>
          Test item</li>
        <li>
          Test item</li>
      </ul>
    </div>
    
    <p hide show-gt-sm>Desktop view: ul should be 864px minimum, then 55% width after that</p>
    
    <p hide show-sm>Tablet view: ul should be 90% width</p>
    
    <p hide show-xs>Phone view: ul should be 100% width</p>
  
  </body>
</html>

var app = angular.module('MaterialApp', ['ngMaterial']);

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 100%;
  
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
  
  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 600px) {
  ul {
    max-width: 90%;
    flex-basis: 90%;
  }
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}




/* Not used in flex code: */
p {
  margin: 16px;
}