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

Sep 28, 2021
Reaction score
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>
<div class="media__body">
<h3 class="media__title">Easy Start & Managed Updates</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
consectetur accusamus, deleniti vitae vel inventore.

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


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question