Group doesn't always scale to content (flexbox)

[Lichtjaeger]

What are the steps to reproduce?

I have a dynamic list to show. For this, I have written the following template node:

<div class="ausbeute">
  <div ng-repeat="charge in msg.payload">
    <h4>{{charge.Brennertyp}}</h4>
    <p>Gesamt: {{charge.Gesamt}}</p>
    <p>Gut: {{charge.Gute}}</p>
    <p>Prozent: {{(charge.Gute * 100 / charge.Gesamt).toFixed(1)}}%</p>
    <p>Ausfall:</p>
    <ul>
      <li ng-repeat="error in charge.fehlerListe">
        {{error.MengeFehler}} {{error.Fehler}}
      </li>
    </ul>
  </div>
</div>

And use this styling:

<style>
  .ausbeute {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .ausbeute>div {
    flex: 1 0 24%;
  }
</style>

Group width is set to 24.

What happens?

The group height is not set to the real size of the content and shows scrollbars.

In some browsers on some OS, it rescales sometimes on update. But not every time.

What do you expect to happen?

The group should scale by content, even if it is in a flexbox.

Please tell us about your environment:

The app is running on a Windows Server.

• [x] Node-RED-Dashboard version: 2.9.4
• [x] Node-RED version: 0.18.7
• [x] node.js version: 9.9.0
• [x] npm version: 5.6.0
• [x] Platform/OS: Windows 7, Windows 10, Windows Server 2016
• [x] Browser: Edge 17, Firefox 62, Chrome 67 and Brave 0.50

[Marooned-MB]

I doesn't have to be flexbox. I have simple <div ng-repeat="item in msg.payload">{{item}}</div> and I can only see one row and a vertical scroll bar, so height is not calculated properly.

[dceejay]

The height in a template is not dynamic - you need to refresh after the content has loaded.

[Marooned-MB]

Actually, adding wrapper with height: 100% solved the issue for me. But what do you mean by you need to refresh? I'm passing payload to the template and render it inside. What should I refresh (without this wrapper fix) besides sending new payload?

[realjax]

I have a similar problem. The 100% height wrapper work around didn't work for me, so I would also like to know how to refresh :)