小编gun*_*n4r的帖子

Flexbox溢出-y滚动条显示在主体而不是Firefox/IE/Edge中的元素

问题:

在使用带溢出的flexbox的全尺寸应用布局(100%宽度,100%高度)中,滚动条不会在Firefox,IE或Edge中显示溢出y.它们可以在Chrome中正确显示.滚动条不是在元素上的FF/IE/Edge中使用垂直滚动条,而是应用于整个页面.

我试过的:

我已经尝试添加,如其他几个SO答案中所提到的,添加min-height: 0;到flex元素/父母.我无法让这个解决方案起作用,但也许我做错了.

截图:

铬:

火狐:

例:

https://codepen.io/gunn4r/pen/WEoPjN

html {
  height: 100%;
}

.flex-grow {
  flex: 1;
}

.canvas-wrapper {
  overflow: scroll;
}

.canvas {
  width: 3000px;
  height: 3000px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<body class="h-100">
  <div class="h-100 container-fluid d-flex flex-column">

    <div class="row bg-warning">
      <div class="col-12 py-4">Top Bar</div>
    </div>

    <div class="row no-gutter flex-grow">

      <div class="col-9 px-0 d-flex flex-column">
        <div class="canvas-wrapper">
          <div class="canvas bg-success">
            Canvas
          </div>
        </div>
        <div class="bg-danger py-3">
          Canvas Footer
        </div>
      </div>

      <div class="col-3 bg-primary"> …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox bootstrap-4

gun*_*n4r

2018 05-18

10
推荐指数

1
解决办法

2168
查看次数

TS2322扩展Button时出错，找不到组件属性。正确的打字方式是什么？

我正在从MUI v3迁移到v4。我有一些包装好的Button组件，这些组件在常规的Material UI Button组件上扩展了样式和其他属性。由于升级到v4，因此出现类型错误。我正在使用react-router-dom作为我的路由库。

按照MUI v4文档中更新的Button示例中的说明传递转发的ref组件时（此处：https : //material-ui.com/components/buttons/#third-party-routing-library），出现类型错误component我为包装好的按钮提供的道具类型中不存在。

我已经尝试了Button组件中各种类型的组合，以查看是否还有其他方法可行，但似乎ButtonProps应该根据构建的OverrideProps类型来覆盖它ButtonProps。

这是我在代码沙箱中的复制品：

https://codesandbox.io/s/mui-button-type-issue-dihdd?from-embed

注意：在“代码沙箱”切换类型时，显示类型错误需要一分钟。