如何根据子表宽度设置 select 框宽度 - css

Question

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?

Answer 1

As you have the class or ID for your element, you are able to access the width with document.getElemnt functions. So you can define a function for when you are opening your table or showing it, then access the width of your table by document functions and assign it to whatever element you want.