0

I am using material-ui and react, I need to fix the top bar(not at the top of the page), which is a top bar for a Grid element(parent).

I tried to fix the topbar(child) with this: navigation: { position: 'fixed', maxWidth: '47vw', } And the Grid(parent) is: root: { maxWidth: '100vw', } But if the width of the Grid(parent) changes, the topbar will overlap on the other Grid element which is there next to its parent. How can we fix this overlapping? Or is there any solution with the css property flex which inherits the parent's properties?

Coder
  • 540
  • 1
  • 11
  • 34
  • 1
    Please create a [mcve] demonstrating your issue. It is very hard trying to understand what your problem is with what you have provided – Pete Jul 09 '18 at 15:54
  • Also `position:fixed` doesn't *sound* like the way to go/ – Paulie_D Jul 09 '18 at 16:09
  • https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container : My question was this actually. – Coder Jul 10 '18 at 19:35

1 Answers1

0

Material-UI is using display: flex as default and in flex system for avoiding such things you have to use flex-grow: 1 for example, if you need that element to occupy some blocks you must use flex-basis and for growing with changing the resolution of the page for each element you must set the flex-grow: 1 that means that specific item growing same as the others grow for flex-basis read this: Flex-basis on w3schools

and for flex-grow read this: Flex-grow on w3schools

El.
  • 1,217
  • 1
  • 13
  • 23