Great question! The core issue here is that inline styles have higher priority than any regular CSS selector—no matter how specific your selector is, it can't beat the inline height value. Here are two reliable solutions that avoid using !important:

Solution 1: Move Inline Styles to CSS (Recommended) #

If you can modify the HTML, move the target div's inline styles into a CSS class. This lets you use a more specific selector to override the base style cleanly:

Updated HTML Snippet: #

<div class="top_bar hide">
  <div class="flex-height"></div>
</div>

Base CSS (Replaces Inline Styles): #

.flex-height {
  display: flex;
  height: calc(100% - 28px);
}

Override CSS: #

body.active .top_bar.hide .flex-height {
  height: calc(100% - 0px);
}

This approach keeps all styles centralized, makes future adjustments easier, and avoids the limitations of inline styles.

Solution 2: Update Inline Style with JavaScript #

If you can't modify the HTML or base CSS, use JavaScript to directly update the target element's inline style. This replaces the original inline value without needing !important:

// Locate the target element
const targetDiv = document.querySelector('body.active .top_bar.hide + div');

// Only modify if the element exists
if (targetDiv) {
  targetDiv.style.height = 'calc(100% - 0px)';
}

Why Pure CSS Selectors Won't Work #

Quick note on specificity: Inline styles have a specificity weight of 1000, which is higher than any combination of class, attribute, or element selectors. That's why even a super-specific CSS rule can't override inline styles without !important—so the two solutions above are your best bets.

内容的提问来源于stack exchange，提问作者niina