Quasar Nested Tables - constrain nested table to parent width

[jeffn]

Trying to figure out how to get the nested tables here to constrain their width to the parent row. Right now, the nested table may auto size itself and drive the parent table to end up with a horizontal scrollbar

<q-table
        class="q-mt-lg q-pb-md"
        row-key="name"
        :data="reconciliation.configurationTypes"
        :rows-per-page-options="[0]"
        :hide-pagination="true"
        :hide-selected-banner="true"
        selection="multiple"
        :visible-columns="['name', 'directory']"
        ref="configurationTypesTable"
      >
        <template v-slot:header-selection>
          <q-checkbox class="float-left" v-model="reconciliation.selected" />
        </template>

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td>
              <q-btn dense flat :icon="props.expand ? 'keyboard_arrow_down' : 'keyboard_arrow_right'" @click="props.expand = !props.expand"></q-btn>
              <q-checkbox v-model="props.row.selected" />
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'name'">
                {{ props.row[col.name] }}
              </div>
              <div v-if="col.name != 'name'" style="word-break: break-word; white-space: normal">
                {{ props.row[col.name] }}
              </div>
            </q-td>
          </q-tr>
          <q-tr v-show="props.expand" :props="props" class="bg-blue-grey">
            <q-td colspan="100%">
              <div class="q-gutter-y-md">
                <div v-for="reconciliationType in props.row.reconciliationTypes" :key="reconciliationType.name">
                  <q-table
                    :data="reconciliationType.configurations"
                    row-key="name"
                    :rows-per-page-options="[0]"
                    :hide-pagination="true"
                    selection="multiple"
                    :hide-selected-banner="true"
                    :visible-columns="['name', 'description']"
                    ref="configurationsTable"
                  >
                    <template v-slot:header-selection>
                      <q-checkbox class="float-left" v-model="reconciliationType.selected" />
                    </template>

                    <template v-slot:top>
                      <div class="text-h6">
                        {{ reconciliationType.name }}
                      </div>
                      <q-badge class="q-ml-md q-mr-md absolute q-pa-xs" color="blue-grey" style="right: 0px">
                        <q-icon name="check_box" color="white" class="q-ml-xs q-mr-xs" style="font-size: 1.8em" />
                        <span style="font-size: 1.2em"> {{ reconciliationType.checkedLabel }}</span>
                        <q-icon name="check_box_outline_blank" color="white" class="q-ml-lg q-mr-xs" style="font-size: 1.8em" />
                        <span style="font-size: 1.2em;" class="q-pr-sm"> {{ reconciliationType.uncheckedLabel }}</span>
                      </q-badge>
                    </template>

                    <template v-slot:body="props">
                      <q-tr :props="props">
                        <q-td>
                          <q-btn
                            dense
                            flat
                            v-if="props.row.properties.length > 0"
                            :icon="props.expand ? 'keyboard_arrow_down' : 'keyboard_arrow_right'"
                            @click="props.expand = !props.expand"
                          ></q-btn>
                          <q-checkbox v-model="props.row.selected" />
                        </q-td>
                        <q-td
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                          style="word-break: break-word; white-space: normal; min-width: 200px"
                        >
                          <span v-if="col.name == 'name'">
                            {{ props.row[col.name] }}
                          </span>
                          <q-markdown v-if="col.name == 'description'" :noHtml="false" :src="props.row[col.name]" />
                        </q-td>
                      </q-tr>
                      <q-tr v-show="props.expand" :props="props" v-if="props.row.properties.length > 0">
                        <q-td colspan="100%">
                          <q-table
                            :data="props.row.properties"
                            row-key="path"
                            :rows-per-page-options="[0]"
                            :hide-pagination="true"
                            :hide-bottom="true"
                            selection="multiple"
                            :visible-columns="['name', 'baseline', 'tenant']"
                          >
                            <template v-slot:header-selection> </template>

                            <template v-slot:body="props">
                              <q-tr :props="props">
                                <q-td>
                                  <q-checkbox v-model="props.row.selected" />
                                </q-td>
                                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                                  <div v-if="col.name == 'name'">
                                    {{ props.row[col.name] }}
                                  </div>
                                  <div v-if="col.name != 'name'" style="word-break: break-all; white-space: normal">
                                    {{ props.row[col.name] }}
                                  </div>
                                </q-td>
                              </q-tr>
                            </template>
                          </q-table>
                        </q-td>
                      </q-tr>
                    </template>
                  </q-table>
                </div>
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>