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


Joined
Sep 28, 2021
Messages
1
Reaction score
0
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;
}
 
Ad

Advertisements


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

Top