Как заставить "fit-content" работать в разных браузерах? - PullRequest
Новая
       36

Как заставить "fit-content" работать в разных браузерах?

0 голосов
/ 18 февраля 2019

У меня есть эта простая сетка, где ячейки являются <p> элементами (примечание: так и должно быть): 

<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="http://www.stuff.co.nz/etc/designs/ffx/nz/stuff/social-media-logos/stuff-200x200.png"/>
  </p>
</div>

CSS: 

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  height: fit-content;
  height: -moz-fit-content;
  border-color: black;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}

( здесь, на CodePen )

Работает, как и ожидалось, в Chrome - параграф «Текстовое содержимое» «обнимает» содержимое и остается менее 200 пикселей (что продиктовано <img>.my класс).Однако в Firefox он перестает работать - высота абзаца составляет 200 пикселей, как если бы не было предоставлено -moz-fit-content.

Как я могу заставить этот код вести себя в Firefox так же, как в Chrome?

1 Ответ

0 голосов
/ 18 февраля 2019

Удалите height на элементах сетки и добавьте align-items: start; (по умолчанию stretch) в контейнер сетки. 

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  align-items: start; /* NEW */
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  border-color: red;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}
<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="https://i.imgur.com/Spk75ST.jpg" />
  </p>
</div>
...