React-bootstrap: TabContent is overlapping Tabbar, when Window-width decreases

Question

If the tab bar becomes two rows due to narrowing of the browser window, the tab content does not move down, but overlaps the second row of the tab bar.

I am working on a wokaround by computing the current height of the Tabbar in order to dynamically set the Tab.Content's position and height.

const tabbarHeight = elementRef.current.offsetHeight;

This seems to work, but i am wondering if there is a another, simpler solution for that. What am i missing?

Answer 1

You can use MediaQuery for example :

@media only screen and (max-width: 600px) {
  .class-name{
      // your css here. Also you can change screen size
   }
}