The outcome is as expected:
#container {
display: flex;
}
#red_box {
height: 30%;
width: 30%;
background-color: red;
}
<div id ="container">
<div id="red_box">a</div>
<div id="blu_box">b</div>
</div>
However, when I separate the height property into its own class and apply both styles to the element, the height setting is not recognized.
#container {
display: flex;
}
#box {
height: 30%
}
#red_box {
width: 30%;
background-color: red;
}
<div id ="container">
<div class="box red_box">a</div>
<div class="box blu_box">b</div>
</div>