Multi-Column Header Experiment Help -- Parent column width stretches child column

Here is my plunker: http://plnkr.co/edit/fsJdENoN1ll4FUGsPzts?p=preview

I am trying out what's described here: http://stackoverflow.com/questions/29564283/any-better-approaches-in-achieving-multi-column-grouping-in-ui-grid-header

When I manually set the min and max column with on the "parent" column:

<div class="ui-grid-header-cell ng-scope" col-name="group2">
                            <div class="ui-grid-cell-contents ng-binding" style="min-width: 220px; max-width: 1000px;">Group 2</div>

It stretches the "child" column as well (the Title column is stretched). How can I "break" the association? Or how can I achieve multi-column header manually?

Thanks.