How to make a flex box inherit its parent (container) background.

[arsh]

So, I have just made a media component for the website (which happens to be a flex box) but I do not want to define the background of the flex box since I have the media components in different places on my website . I want to inherit the background of the div-container I place it in. For some reason my flex box does not inherit the property of its parent element.
<div class="parent">
<div class="media">
<div class="media__image">
<svg class="icon icon--primary">
<use xlink:href="/images/sprite.svg#snap"></use>
</svg>
</div>
<div class="media__body">
<h3 class="media__title">Easy Start & Managed Updates</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
consectetur accusamus, deleniti vitae vel inventore.
</p>
</div>
</div>
</div>


style sheet-
.parent{
background: black;
}
.media {
display: flex;
}
.media__title {
margin-top: 0;
}
.media__body {
margin: 0 2rem;
}
.media__image {
margin-top: 1rem;
}