How to write SCSS for Element => ElementClass => Child Class - css

Question

Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?
*****HTML*******
<my-parent class="parent">
//I have added myflag to identify this has to apply only in case of my scenario
<global-child [class.myFlag]="myFlag===true">
<div class="child">
<div class="description">test</div>
<div class="end">end</div>
</div>
</global-child>
</my-parent>
This is how i tried to apply my css, it is picking up height but not color for description
*****SCSS******
global-child.myflag{
height: 100px !important
&.description{
color: blue !important
}
}
Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.
"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "
Edit 2:
Updated few changes in HTML above and below are my child and parent css
****global child css****
.child {
display: flex;
flex-direction: row;
&-description {
width: 100%;
color: BLACK;
position: relative;
}
}
****Parent css*****
.parent{
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
}

Answer 1

This will work
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
Now when to use &
When you have class on same element
Like if you have element like
<global-child class="myflag description">
Then you should use & to apply properties to global-child element
But in your case .description is child of global-child element.
So this will work
global-child {
&.myflag {
// css properties
.description {
// css properties for `.description` those are child of `global-child.myflag
}
}
.description {
// css properties for `.description` those are child of only `global-child
}
}

Answer 2

Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.