En mi aplicación vue, he diseñado un cuadro de selección que tiene un componente de tabla. Al hacer clic en el cuadro de selección, la tabla es visible en el contenedor. Ahora, el problema es que no puedo establecer el ancho dinámico del cuadro de selección en función del ancho de la tabla.

Ahora, las filas de la tabla se superponen debido al ancho fijo del cuadro de selección. Es abrir el contenedor al revés. Hay un rollo debido al ancho.

Aquí está mi código

 <div class="dropdown_grid my-dropdown--medium> ... div related to title and toggle // here is the container <div class="dropdown_grid_container" ref="floating" v-ur-attach-root:fit v-click-outside.anchor="close" > <ul><li><my-table :items="items" :headers="headers" single-select></my-table></li></ul> </div> </div>

css para esto

 .dropdown_grid { display: inline-block; position: relative; min-width: 150px; width: 100%; color: #333333; cursor: pointer; } .dropdown_grid_container { width: 100%; position: absolute; margin-top: -1px; min-width: 500px; overflow-y: auto; background-color: #FFFFFF; border: 1px solid #959595; z-index: 200; max-height: 200px; padding: 8px 1px; margin-left: 2px; } .my-dropdown--medium { font-size: 14px; line-height: 24px; height: 32px

He visto varias publicaciones sobre esto, pero no puedo establecer el ancho dinámico. ¿Cómo hacerlo dinámico en función del ancho del niño?