fix(list): remove secondary container flex filler.

* Currently the secondary container was pushed to the end of the list-item by using a flex element with auto.
  This is causing issues with custom content of developers, because the flex filler has a high priority and reserves space.

* This can be fixed, by using a margin auto, which has a lower priority and isn't reserving any space.
   This allows the user to style the content himself and we won't interfere.

Fixes angular#7976.

src/components/list/list.js

@@ -170,10 +170,6 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
           wrapSecondaryItem(secondaryItem, secondaryItemsWrapper);
         });
 
-        // Since the secondary item container is static we need to fill the remaing space.
-        var spaceFiller = angular.element('<div class="flex"></div>');
-        itemContainer.append(spaceFiller);
-
         itemContainer.append(secondaryItemsWrapper);
       }
 

src/components/list/list.scss

@@ -295,7 +295,15 @@ md-list-item {
       align-items: center;
 
       height: 100%;
-      margin: auto;
+
+      // The secondary container is now static and needs to be aligned at the end of its parent.
+      // - Using an absolute position will cause much issues with the overflow.
+      // - Using a flex-filler, which pushes the container to the end of the parent is working
+      //   but breaks the users list-item layout.
+      // Using margin auto to move them to the end of the list item is more elegant, because it has
+      // a lower priority than the flex filler and isn't introducing overflow issues again.
+      // The margin on the top is also important to align multiple secondary items vertical correctly.
+      @include rtl(margin, auto 0 auto auto, auto auto auto 0);
 
       .md-button, .md-icon-button {
         &:last-of-type {

src/components/list/list.spec.js

@@ -138,9 +138,9 @@ describe('mdListItem directive', function() {
     var buttonWrap = listItem.children().eq(0);
     expect(listItem).toHaveClass('_md-button-wrap');
 
-    // The button wrap should contain the button executor, the inner content, flex filler and the
+    // The button wrap should contain the button executor, the inner content and the
     // secondary item container as children.
-    expect(buttonWrap.children().length).toBe(4);
+    expect(buttonWrap.children().length).toBe(3);
 
     var buttonExecutor = buttonWrap.children()[0];
 
@@ -164,9 +164,9 @@ describe('mdListItem directive', function() {
     var buttonWrap = listItem.children().eq(0);
     expect(listItem).toHaveClass('_md-button-wrap');
 
-    // The button wrap should contain the button executor, the inner content, flex filler and the
+    // The button wrap should contain the button executor, the inner content and the
     // secondary item container as children.
-    expect(buttonWrap.children().length).toBe(4);
+    expect(buttonWrap.children().length).toBe(3);
 
     var buttonExecutor = buttonWrap.children()[0];
 
@@ -189,9 +189,9 @@ describe('mdListItem directive', function() {
     var buttonWrap = listItem.children().eq(0);
     expect(listItem).toHaveClass('_md-button-wrap');
 
-    // The button wrap should contain the button executor, the inner content, flex filler and the
+    // The button wrap should contain the button executor, the inner content and the
     // secondary item container as children.
-    expect(buttonWrap.children().length).toBe(4);
+    expect(buttonWrap.children().length).toBe(3);
 
     var buttonExecutor = buttonWrap.children()[0];
 
@@ -230,11 +230,11 @@ describe('mdListItem directive', function() {
 
     expect(listItem).toHaveClass('_md-button-wrap');
 
-    // It should contain three elements, the button overlay, inner content, flex filler
+    // It should contain three elements, the button overlay, inner content
     // and the secondary container.
-    expect(firstChild.children().length).toBe(4);
+    expect(firstChild.children().length).toBe(3);
 
-    var secondaryContainer = firstChild.children().eq(3);
+    var secondaryContainer = firstChild.children().eq(2);
     expect(secondaryContainer).toHaveClass('_md-secondary-container');
 
     // The secondary container should contain the md-icon,
@@ -256,11 +256,11 @@ describe('mdListItem directive', function() {
 
     expect(listItem).toHaveClass('_md-button-wrap');
 
-    // It should contain three elements, the button overlay, inner content, flex filler
+    // It should contain three elements, the button overlay, inner content,
     // and the secondary container.
-    expect(firstChild.children().length).toBe(4);
+    expect(firstChild.children().length).toBe(3);
 
-    var secondaryContainer = firstChild.children().eq(3);
+    var secondaryContainer = firstChild.children().eq(2);
     expect(secondaryContainer).toHaveClass('_md-secondary-container');
 
     // The secondary container should hold the two secondary items.