【发布时间】：2019-05-30 17:21:35
【问题描述】：
TL;DR
此代码适用于 Chrome，但不适用于 MS Edge https://angular-ysqrgh.stackblitz.io/，因为 grid 容器宽度在 MS Edge 中不会改变
上下文
我正在尝试在页面右侧为地图工具添加一个按钮容器。想象一下放大、缩小等按钮。由于 UI 的其余部分，它必须定位在那里。
有几种不同类型的按钮组都将进入此按钮容器。在我的示例中，我通过使用+ 或- 标记来区分这些组。
期望的行为
每个按钮组都定义为display: grid。我正在寻找的行为是当屏幕足够高时，所有按钮都会显示。如果高度不够小，无法全部显示，则每个组会将多余的按钮包装到另一列上，最少为 2 行（尽可能多的列）。
此外，我希望每个网格只占用与其内容一样多的高度，而不是扩展到整个父级的高度（这就是我不使用 flex-grow 的原因）。
这是我想要的一个例子https://angular-ysqrgh.stackblitz.io/ 它适用于 Chrome，但不适用于 Edge。注意：我镜像了左侧的元素，仅供本示例参考。
我认为是什么原因
MS Edge 在使用grid-auto-flow: column 行为时似乎有问题。我做了一个颠倒行和列的测试，MS Edge 似乎能够在https://angular-mzvgjm.stackblitz.io 模式下很好地调整宽度和高度，所以我觉得问题与 MS Edge 如何处理grid-auto-flow 属性有关。
在这个“行”示例中，我确实遇到了在展开时将所有按钮布置在单行中的问题......可能与我在列布局中遇到的问题有关，但我没有看到解决方案。
有什么方法可以实现我正在寻找的行为？
EDIT1：这是 Stackblitz 链接中的代码...
HTML
<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>
SCSS
.btn {
border-radius: 0.15rem;
background-color: #4caf50;
color: #fff;
cursor: pointer;
user-select: none;
text-align: center;
white-space: nowrap;
font-size: 1rem;
border: 1px solid #4caf50;
margin: 0;
}
#map-controls-container {
left: 0;
}
#map-controls-container2 {
right: 0;
}
#map-controls-container,
#map-controls-container2 {
position: absolute;
top: 0;
background-color: #0000ff;
display: inline-flex;
flex-direction: column;
min-height: 172px;
height: 100%;
.map-controls-style {
min-height: 86px;
max-height: 100%;
display: grid;
background-color: #1b5e20;
grid-template-rows: repeat(auto-fit, 40px);
align-content: space-around;
grid-gap: 2px;
padding: 2px;
grid-auto-flow: column;
grid-auto-columns: 40px;
button {
background-size: 100% 100%;
background-origin: content-box;
background-position: center center;
width: 40px;
height: 40px;
padding: 0;
}
}
}
EDIT2： 澄清一下，我正在寻找这个问题的 CSS 答案。通过订阅窗口调整大小事件并使用 Typescript 手动计算新宽度，我现在设法获得了所需的结果。
【问题讨论】：
-
我尝试测试 grid-auto-flow: column;在单独的示例中，它在 Edge 中工作。当我打开开发人员工具并使用它选择和元素时，以及调整窗口大小时，我发现了一些有趣的事情。它适用于 2 列。输出：i.postimg.cc/05bXKhR6/42.gif
-
不，问题仍然存在，只是在右侧看不到。这就是为什么我在左侧添加了相同的代码，这样你就可以看到屏幕外发生了什么。看起来 Edge 在加载时根据窗口的尺寸计算容器的宽度。当您调整它的大小时，您可以看到它从 2 列变为 3，然后是 4、5，然后是 6。但是请注意，深绿色容器没有改变宽度以包含按钮，按钮只是在容器之外展开。这也是右侧发生的情况，但按钮溢出屏幕。
标签： css resize microsoft-edge css-grid