CODEWITHSUNDEEP
htmlcsslayoutcss-grid
peetonn
peetonn

Reputation: 3052

How to make "fit-content" work across browsers?

I have this simple grid setup, where cells are <p> elements (note: it has to stay that way):

<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;
}

(here it is on the CodePen)

It works as expected on Chrome -- "Text Content" paragraph "hugs" the content and stays less than 200px (which is dictated by the <img>'s .my class). However, on Firefox, it stops working -- paragraph height is 200px as if no -moz-fit-content was provided.

How can I make this code behave in Firefox similarly as it does in Chrome?

Upvotes: 2

Views: 3974

Answers (1)

Stickers
Stickers

Reputation: 78726

Remove the height on the grid items and add align-items: start; (the default is stretch) to the grid container.

.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>

Upvotes: 3

Related Questions