Почему ширина элемента CSS Grid не изменяется при автопотоке: столбец в MS Edge? - PullRequest
Новая
       28

Почему ширина элемента CSS Grid не изменяется при автопотоке: столбец в MS Edge?

2 голосов
/ 30 мая 2019

TL; DR

Этот код работает в Chrome, но не в MS Edge https://angular -ysqrgh.stackblitz.io / , поскольку ширина контейнера grid в MS Edge

не изменяется

Контекст

Я пытаюсь добавить контейнер кнопок в правой части моей страницы для инструмента карты. Представьте себе такие кнопки, как увеличение, уменьшение и т. Д. Из-за остального пользовательского интерфейса он должен располагаться там.

Существует несколько различных типов групп кнопок, которые будут все находиться внутри этого контейнера кнопок. В моем примере я провел различие между группами, пометив их + или -.

Желаемое поведение

Каждая группа кнопок определяется как 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.

...