为什么CSS Grid元素的宽度在MS Edge的auto-flow:列中不调整大小?

时间:2019-05-30 17:21:35

标签: css resize microsoft-edge css-grid

TL; DR

此代码在Chrome中有效,但不适用于MS Edge https://angular-ysqrgh.stackblitz.io/,因为grid容器宽度在MS Edge中不会更改

上下文

我正在尝试在页面右侧添加用于地图工具的按钮容器。想象一下诸如放大,缩小等按钮。由于UI的其余部分,它必须位于该位置。

有几种不同类型的按钮组都将放在此按钮容器中。在我的示例中,我通过用+-标记它们来区分这些组。

期望的行为

每个按钮组都定义为display: grid。我要寻找的行为是,当屏幕足够高时,将显示所有按钮。如果高度不够小,无法全部显示,则每个组会将多余的按钮包装到另一列上,最少两行(必要时可多列)。

此外,我希望每个网格仅占用其内容的高度,而不是扩展到整个父对象的高度(这就是为什么我不使用flex-grow的原因)。

这是我想要的https://angular-ysqrgh.stackblitz.io/的一个示例 它适用于Chrome,但不适用于Edge。注意:在本示例中,我将左侧的元素镜像为仅供参考。

我认为是原因

使用此grid-auto-flow: column行为时,MS Edge似乎有问题。我进行了行和列反转的测试,在这种模式https://angular-mzvgjm.stackblitz.io下,MS Edge似乎能够调整宽度和高度的大小,因此我觉得问题与MS Edge如何处理{{1 }}属性。

在这个“行”示例中,扩展时我确实无法将所有按钮布置在一行中...也许与列布局的问题有关,但是我没有找到解决方案。

有什么办法可以实现我想要的行为?

EDIT1 :这是Stackblitz链接中的代码...

HTML

grid-auto-flow

SCSS

<div id="map-controls-container">
  <div id="map-navigation-controls" class="map-controls-style">
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
  </div>

  <div id="map-selection-controls" class="map-controls-style">
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
  </div>
</div>

<div id="map-controls-container2">
  <div id="map-navigation-controls" class="map-controls-style">
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
  </div>

  <div id="map-selection-controls" class="map-controls-style">
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
  </div>
</div>

EDIT2:为了澄清,我正在寻找此问题的CSS答案。通过订阅窗口调整大小事件并使用Typescript手动计算新宽度,我现在设法获得了预期的结果。

1 个答案:

答案 0 :(得分:0)

这可能是因为IE和Edge在CSS Grid方面非常棘手,我今天花费了大部分时间试图修复我的整个代码库,因为它无法在MS Browsers上运行:(

要解决此问题,只需添加CSS中包含CSS Grid内容的 -ms-grid 即可。 像这样:

headroom

Autoprefixer

是一个非常有用的工具,可以将CSS Grid覆盖到-ms-grid并加载其他内容。

请告诉我它是否有效:)