title: How can I get buttons inside a div inside a row to wrap? (flex and angular)
body: <p>So I've got a kind of header, that contains a heading and a bunch of buttons. These buttons can be added to, so it's important to me that they wrap properly.</p>
  
  <p>The catch is that these buttons are fed in via angular as an outside component, and as such they get put in a div (I'm assuming?)</p>
  
  <p>In this codepen I have illustrated the result I want to reach (blue) vs. what I'm getting (red). It's hard to see on the snippet so here is a <a href="https://codepen.io/meek/pen/BmVdWa?editors=1100" rel="nofollow noreferrer">link to a codepen</a>. To be clear, I want the buttons to wrap individually, one by one, rather than as a group.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-row {
    display: flex;
    flex-flow: row wrap;
  }
  
  .red {
    background: red;
  }
  
  .blue {
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-row red"&gt;
    &lt;h1&gt;Really long annoying header goes here&lt;/h1&gt;
    &lt;div&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="flex-row blue"&gt;
    &lt;h1&gt;Really long annoying header goes here&lt;/h1&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
      &lt;button&gt;button&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>By the way, here is the component selection-buttons.component.html:</p>
  
  <pre><code>&lt;button class="selectionbtn selectbtn" *ngFor="let btn of input.items;let idx = index" (click)="onSelect(idx)" [ngClass]="{'first': idx === 0, 'last': idx === input?.items?.length -1, 'active': currIndex === idx }" value="idx"&gt;{{btn.label | translate}}&lt;/button&gt;
  </code></pre>
  
  <p>I made sure to remove the div they were being generated inside, which made me think that when  gets called, they would just be generated inside the current div, but it doesn't seem to be the case.</p>