title: How to control the flexbox size in mui v5?
body: <p>Currently I have a code directly copying from mui v5 Card example, and I realized that the size of my flexbox is different from the mui example.</p>
  <p>The mui example look like below. The image is pushed to the right side.</p>
  <p><a href="https://i.stack.imgur.com/KiUYS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KiUYS.png" alt="enter image description here" /></a></p>
  <p>for me, the image remained in the middle. So I have applied a border to visualize the flexbox size, and I realized that the flexbox of my CardMedia does not follow his parent <code>Card</code> component. It look like this:
  <a href="https://i.stack.imgur.com/AKQLo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKQLo.png" alt="enter image description here" /></a></p>
  <p>This is the code:</p>
  <pre><code>        &lt;Card sx={{ display: 'flex', border: 4 }}&gt;
            &lt;Box sx={{ display: 'flex', flexDirection: 'column' }}&gt;
              &lt;CardContent sx={{ flex: '1 0 auto' }}&gt;
                &lt;Typography component=&quot;div&quot; variant=&quot;h5&quot;&gt;
                  Live From Space
                &lt;/Typography&gt;
                &lt;Typography variant=&quot;subtitle1&quot; color=&quot;text.secondary&quot; component=&quot;div&quot;&gt;
                  Mac Miller
                &lt;/Typography&gt;
              &lt;/CardContent&gt;
              &lt;Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}&gt;
                &lt;IconButton aria-label=&quot;previous&quot;&gt;
                  {theme.direction === 'rtl' ? &lt;SkipNextIcon /&gt; : &lt;SkipPreviousIcon /&gt;}
                &lt;/IconButton&gt;
                &lt;IconButton aria-label=&quot;play/pause&quot;&gt;
                  &lt;PlayArrowIcon sx={{ height: 38, width: 38 }} /&gt;
                &lt;/IconButton&gt;
                &lt;IconButton aria-label=&quot;next&quot;&gt;
                  {theme.direction === 'rtl' ? &lt;SkipPreviousIcon /&gt; : &lt;SkipNextIcon /&gt;}
                &lt;/IconButton&gt;
              &lt;/Box&gt;
            &lt;/Box&gt;
            &lt;CardMedia component=&quot;img&quot; image={ablum} sx={{ width: 151, border: 4 }} alt=&quot;Live from space album cover&quot; /&gt;
          &lt;/Card&gt;
  </code></pre>
  <p>Actually, I faced this problem a lot that I cannot control the flexbox size. Has anyone got an idea how I can push the photo to far right using something like <code>justifyContent: 'flex-end'</code>? But before that, I believes I need to fix the flexbox size first. Feel free to leave a comment if you got an idea. Thanks.</p>