I don't believe it is associated with this question as it seem to be referring to the wrapping that occurred in what is equivalent to my ka-chart-legend-item rows. Mine correctly do not wrap in those divs. All the 'wrapping' (on all elements) works correctly, it is simply the 'shrinking' of the ka-chart-legend-wrapper element that isn't behaving how I'd like it to.
If I have multiple rows of 'legend items' my wrapper (bordered) box is auto expanding to 100%. Here is the image of the legend.
When I hover, you can see all the wasted space of flex (I'd expect 0.3 padding on each side of the longest row).
However, if I don't have enough legend items to require multiple rows, the wrapper shrinks as I want.
Here is my markup and CSS:
.ka-chart-legend { text-align: center; /* Center the legend wrapper */}.ka-chart-legend>.ka-chart-legend-item-wrapper { display: inline-flex; /* Use Flexbox for layout */ flex-wrap: wrap; /* Allow items to wrap when they exceed parent width */ justify-content: center; /* Center items within the wrapper */ border: solid 1px rgb(51, 51, 51); /* Border around the legend */ padding: 0.3em 0; width: auto;}.ka-chart-legend-item { padding: 0 0.6em; cursor: pointer; font-size: 0.7em; display: flex; align-items: center;}<div class="ka-chart-legend"><div class="ka-chart-legend-item-wrapper"><div class="ka-chart-legend-item" ka-chart-series-item="401(k) Plan"><svg width="12px" height="12px" opacity="1"><rect x="0" y="0" width="10" height="10" fill="#2895D5"></rect></svg><span class="ps-2 nowrap ka-chart-legend-text" style="opacity: 1;">401(k) Plan</span></div><div class="ka-chart-legend-item" ka-chart-series-item="Personal Savings"><svg width="12px" height="12px" opacity="1"><rect x="0" y="0" width="10" height="10" fill="#FD9F13"></rect></svg><span class="ps-2 nowrap ka-chart-legend-text" style="opacity: 1;">Personal Savings</span></div><div class="ka-chart-legend-item" ka-chart-series-item="Social Security"><svg width="12px" height="12px" opacity="1"><rect x="0" y="0" width="10" height="10" fill="#10a610"></rect></svg><span class="ps-2 nowrap ka-chart-legend-text" style="opacity: 1;">Social Security</span></div><div class="ka-chart-legend-item" ka-chart-series-item="Pension Benefit"><svg width="12px" height="12px" opacity="1"><rect x="0" y="0" width="10" height="10" fill="#cb35a9"></rect></svg><span class="ps-2 nowrap ka-chart-legend-text" style="opacity: 1;">Pension Benefit</span></div><div class="ka-chart-legend-item" ka-chart-series-item="Retirement Income Needed"><svg width="12px" height="12px" opacity="1"><line x1="0" y1="5" x2="10" y2="5" stroke="#D92231" stroke-width="2"></line></svg><span class="ps-2 nowrap ka-chart-legend-text" style="opacity: 1;">Retirement Income Needed</span></div></div></div>Any ideas on how to make it work?