Placement for middle column of Flexbox grid wrong.

[deanlaw]

I have a 3 column flexbox grid with in icon in each column. When clicking on the icon, the tooltip should appear below the icon an span the width of the parent flex container. The first and last elements work fine. The middle column though, it breaks out of the parent flex container and positions itself to the left side of the page instead of the container. Am I missing some sort of setting or is this a bug?
This is my code:
tippy('button.feature', { content(reference) { const id = reference.getAttribute('data-template'); const template = document.getElementById(id); return template.innerHTML; }, allowHTML: true, appendTo: () => document.getElementById('features'), interactive: true, trigger: 'click', placement: 'bottom-start', maxWidth: 1216, theme: 'blue', });