html {
  font-family: sans;
  font-size: 1.4em cosmetic;
}

main {
  border: 4px dashed rgba(255, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: initial;
}

.collapsible {
  border-top: 2px solid blue;
  border-bottom: 2px solid purple;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.collapsible-inner {
  background: rgba(128, 0, 128, 0.6);
}

button {
  height: 220px;
}

Flex elements appears to have a »radiation« affekt going beyond a height-0-element two levels up. Investigating...<br/>&nbsp;<br/>

<main>
The outer container...
<section class="collapsible">
    <button className='buttonA'>Click me</button>  
</section>
</main>
Some more text...