CSS-сетка с фиксированной шириной больше, чем содержимое

Question

У меня есть простая CSS-сетка с одной ячейкой - <img>.Сетка имеет фиксированную ширину 100px и использует grid-auto-columns: 100%;, чтобы уменьшить изображение, чтобы оно поместилось внутрь:

.grid {
    display: grid;
    width: 100px;
    grid-auto-columns: 100%;

    background-color: #844;
}

.grid > * {
    grid-column: 1;
    grid-row: 1;
}

<div class='grid'>
  <img src='https://i.imgur.com/HAwaW3D.png' />
</div>

Но по какой-то причине высота сетки остается такой, как если бы изображение было отрисовано в своем первоначальном размере, оставляя это пустое пространство после ячейки:

И я никак не могу найти способ избежать этого.

Любые идеи о том, как заставить высоту сетки соответствовать ее содержимомув этом сценарии?

---

примечание: я тестирую в Firefox 56.2.5