In my vue application, i have designed one select box which is having table component. While clicking the select box, table is visible in container. Now, problem is that i am not able to set dynamic width of select box based on table width.

Now, table rows are overlapping because of fixed width of select box. It is opening the container upside. There is a scroll because of width.

Here is my code

    <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 for this

    .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

I have seen multiple post regarding this but not able to set it dynamic width. How to make it dynamic based on child width?