Why a unnamed <div> is added to a specific region?

Question

I have 2 blocks in a region (headline). Drupal 8 seems to add these 2 blocks into an unnamed div and thus their display:flex CSS layout is cancelled. (You can't scatter 2 container items if these are wrapped into one <div>.)

I might need to note that the template markup also doesn't contain such HTML element.

The markup for the region is the following one.

<div id="headline">
<div class="container">
{% if page.headline %}
     {{ page.headline }}
{% endif %}
</div>
</div>

The CSS code I used is the following.

#headline . container {
  display: flex; flex-direction: column; align-items: center
}

@media screen and (min-width: 1080px) {
  #headline .container {
    display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; flex: 1; margin: 0 auto
  }
}

Answer 1

Checkout Twig Debug to see where the template is coming from.

https://www.drupal.org/docs/8/theming/twig/locating-template-files-with-debugging

https://sqndr.github.io/d8-theming-guide/twig/twig-debug.html

It will wrap the template with HTML comments telling you where to find it relative to the website root.

Some of the <div> tags provide containers for applying attributes to for things like contextual links and quick edit, so be cognizant of that when removing them when they have {{ attributes }} printed in them. Those CSS class attributes and data attributes are only are filled when those modules are enabled.

Answer 2

It could be coming from region.html.twig:

https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21region.html.twig/8.2.x

Answer 3

{% if content %}
  <div{{ attributes }}>
    {{ content }}
  </div>
{% endif %}

→

{% if content %}
  <div{{ attributes != '' }}>
    {{ content }}
  </div>
{% endif %}