Why can't I override the base region.html.twig template

Question

I created a custom theme that has the bootstrap_barrio contrib theme as base theme. Everything is setup and working except that my custom region--content.html.twig in the /templates folder of my custom theme isn't being picked up. Drupal continues to use the base region--nowrap.html.twig that came with bootstrap_barrio. My custom template shows up in the list of template suggestions when twig debugging is on.

I thought all I needed to do to override a base template was create a custom template into the custom theme, rebuild cache and Drupal will pick it up, as long as it conforms to the theme hook suggestions naming convention.

Twig Debugging Output:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   x region--nowrap.html.twig
   * region--content.html.twig
   * region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/layout/region--nowrap.html.twig' -->

Answer 1

I found a solution to this problem. Apparently if you have active "Clean wrapper for (x region)" on your theme, it will use that damn nowrap template no matter what. Disabling that goes back to use your default theme templates. You can find it over: /admin/appearance/settings/themeName Screenshot to follow:

Answer 2

The x in the twig debugging indicates the active template. Twig always goes from most specific (top of list) to least specific (bottom of list). So, for this order:

<!-- FILE NAME SUGGESTIONS:
   x region--nowrap.html.twig
   * region--content.html.twig
   * region.html.twig
-->

If region--nowrap.html.twig is present in the current theme or any of the parent themes, it will be given priority over any of the "lower" files.

In your case, You can confirm this by renaming region--nowrap.html.twig in the parent theme; this should cause region--content.html.twig in your subtheme to be given priority.

Solution: Override region--nowrap.html.twig, not region--content.html.twig.