0
2枚のカード（http://www.material-ui.com/#/components/card）の並んでいるコンポーネントを実現しようとしています。私はカードを展開したときしかし、次のことが発生します。2つのコンポーネントを並べて整列させるためにflexを適切に使用する方法（Material UI + ReactJS）？
カード1を手動で展開するクリックされることはありません、まだカード2が展開されている場合、カード1自体を展開カード2さえのサイズに拡張しますカード1はクリックのためにクリックされたことはありません。私は周りを見回しましたが、問題の解決策を見つけることができないようです。どんな提案や指導も大歓迎です。前もって感謝します。続き
はそれのためのスニペットコードです：
<div style={{display:'flex'}}>
<Card style={{ marginLeft: 30, marginRight: 30, flex:1}}>
<CardHeader
title="Card 1"
subtitle="Updated 5/11"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia
expandable={true}
>
<img src="card1.PNG" />
</CardMedia>
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions expandable={true}>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
<Card style={{ marginRight: 30, flex:1}}>
<CardHeader
title="Card 2"
subtitle="Updated 5/11"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia
expandable={true}
>
<img src="card2.PNG" />
</CardMedia>
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions expandable={true}>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
</div>