Material-card too wide for usage in flex grid system

[Frank3K]

I would expect that three <material-card flex=33>'s could be stacked horizontally in a <material-content layout="horizontal">-container. Unfortunately this makes the page too wide (i.e. wider than the window width).

As far as I can see this is the result of the rule margin: $card-margin; for material-card (in _card.scss), where $card-margin is currently 10px (in _variables.scss). Setting the margin to 0 is no option layout-wise; the card is hardly recognizable then.

Example plunkr: http://plnkr.co/edit/vHckwcMApTIcRev5KF9e

[ajoslin]

Fixed. It will fit in fine now - the problem was the inner image's css sizing the image wrong.

[Frank3K]

Unfortunately I don't think it's fixed. I've updated the plunkr to the currently latest version (v0.0.2-master-a69ac48).

The problem still persists: the material-card itself (still) has a margin which leads to the problem.

Due to the change (f33185f) the image inside the material-card looks different now. Previously it filled the whole width of the card, as can be seen in the plunkr from three days ago.

[Frank3K]

@ajoslin: This isssue was reintroduced in a2bc3c6. Should I open a new issue for that (since I can not re-open this one). Updated plunkr.

[marcysutton]

md-card needs to maintain margins no matter how many items there are or what it is inside of. To solve the issue of cards being too wide, you can wrap them in another element with flex. Like this:

<div flex=33>
      <md-card>
        <img class="md-card-image" src="http://placehold.it/350x150" />
        <md-card-content>
          <span>Card 1</span>
        </md-card-content>
      </md-card>
    </div>

Here is an updated Plunker with the latest markup: http://plnkr.co/edit/nE7kMhFoObJdQyEdFSjF?p=preview

[mavillar]

@marcysutton running your script, the result is md-card is 100% width, not 33%

[marcysutton]

The API may have changed. If there is still a problem with it, please open a new issue. (Also note: I no longer work full-time on Angular Material)