CODEWITHSUNDEEP
htmlcssflexbox
pcvnes
pcvnes

Reputation: 977

How to set width of div to grandparent div

I have a table based on flexbox. The container has flex-direction set to row and a flex-item per column. Now i need a way to highlight all items on a row. Since each row is dispersed over multiple flex-items (columns) i tried to create a div which highlights the row. The div is created at the first column with the follwing styling ;

  position: absolute;
  z-index: 65365;
  width: 400px;
  top: -1px;
  height: 27px;
  left: -1px;
  border: 1px;
  border-color: #111;
  border-style: solid;
  border-radius: 4px;
}

Since the table can resizie dynamically i need to set the size of the div highlighting the row relative to the size of the grandparent div, fr-flex-table.

To make it more clear i created a codepen.io example. I was not able to integrate it into this question so therefore an external link to the example.

https://codepen.io/poundfoolish/pen/ExPxEgb

Is there a way to change the width of the div based on the grandparents div width ?

Upvotes: 0

Views: 276

Answers (1)

Kiran Shinde
Kiran Shinde

Reputation: 5992

If columns count is fixed then you can do some thing like this

Suppose for 3 columns

width: calc(calc(100% * 3) + 2px) // 2px just added so that it will cover table borders

Upvotes: 1

Related Questions