【问题标题】:How to fix top bar present in left side Grid using css without overlapping it to the next right side Grid element?如何使用css修复左侧网格中存在的顶部栏而不将其重叠到下一个右侧网格元素?
【发布时间】:2018-12-17 08:53:47
【问题描述】:

我正在使用material-ui并做出反应,我需要修复顶栏(不是页面顶部),这是一个网格元素(父)的顶栏。

我试图用这个来修复顶部栏(子): navigation: { position: 'fixed', maxWidth: '47vw', } 网格(父)是: root: { maxWidth: '100vw', } 但是如果 Grid(parent) 的宽度发生变化,顶栏将重叠在其父级旁边的另一个 Grid 元素上。我们如何解决这种重叠?或者有没有继承父属性的css属性flex的解决方案?

【问题讨论】:

标签: html css reactjs material-ui


【解决方案1】:

Material-UI 使用 display: flex 作为默认值,在 flex 系统中为避免此类事情,您必须使用 flex-grow: 1 例如,如果您需要该元素占据一些块,则必须使用 flex-basis 并且要随着更改每个元素的页面分辨率而增长,您必须设置 flex-grow: 1 这意味着特定项目的增长与其他项目的增长相同 对于 flex-basis,请阅读以下内容: Flex-basis on w3schools

对于 flex-grow,请阅读以下内容: Flex-grow on w3schools

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-12
    • 2022-11-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多