I was trying to make container inside grid cell span to fill rest of space and let items inside wrap as needed but its expanding my table instead of behaving like it would behave outside the table. Any idea how to achieve it and why it happens?
Inside table:
<div style="display: grid; grid-template-columns: max-content auto;"><div style="display: flex; width: 100%; background-color: gray;"><div> asdasd</div><div style="display: flex; flex: 1; background-color: blue; gap: 4px; padding: 4px; flex-wrap: wrap;"><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div></div></div></div>Outside table:
<div style="display: flex; width: 100%; background-color: gray;"><div> asdasd</div><div style="display: flex; flex: 1; background-color: blue; gap: 4px; padding: 4px; flex-wrap: wrap;"><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div><div style="background-color: green; width: 100px;">A</div></div></div>