antd的响应式布局xs和sm：display: none; 变为 display: block; 后,width: max-content 失效，咋回事？

Question

描述：就是展开菜单与面包屑菜单的隐藏和显示，展开菜单的div的css的width属性值为max-width, 初始化的时候没问题，就是当再次回到展开菜单状态时，展开菜单没有显示出来。

我的解决方案：把展开菜单元素的width 直接设置固定值（比如220px）,问题就能解决了，但要是内容宽带不确定的情况下，这种办法是没法解决的。

直接上代码和效果图。

代码：

<template>
  <a-row type="flex" align="middle" >
    <a-col :span="12" style="padding-left: 10px">
      <a-space>
        <a-avatar :src="LogoImg" />
        <a href="" class="logo-tip">logo~</a>
      </a-space>
    </a-col>
    <a-col flex="1" :xs="{span: 0}" :sm="{span: 12}" style="text-align: right">
      <a-menu v-model:selectedKeys="current" @click="onClickMenu" mode="horizontal" :items="menus" />
<!--      <a-menu style="width: 220px !important;" v-model:selectedKeys="current" @click="onClickMenu" mode="horizontal" :items="menus" />-->
    </a-col>
    <a-col flex="1" :xs="{span: 12}" :sm="{span: 0}" style="text-align: right">
      <div class="mini-menu">
        <a-dropdown :placement="'bottomRight'" arrow>
          <MenuFoldOutlined style="font-size: 26px" />
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="(item, index) of menus" :key="index" >
                <a  @click="onClickMenu({item: {originItemValue: item}})">{{ item.label }}</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-col>
  </a-row>
</template>