Why doesn't overflow: hidden work with material icons?

Question

In the sample below, why doesn't overflow: hidden; work on the tile object?

#tileContainer {
  background-color: gray;
  padding: 10px;
}
.tile {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  width: 120px;
  height: 120px;
  background-color: white;
  overflow: hidden;
}

.tile i {
  opacity: .25;
  position: absolute;
  font-size: 150px;
  left: -10px;
  top: 25px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="tileContainer">
  <div class="tile">
    <i class="material-icons">account_balance</i>
    <div id="tileContent">
      Stuff goes here.
    </div>
  </div>
  <div class="tile">
    <div id="tileContent">
      Stuff goes here.
    </div>
  </div>
</div>

The desired result is something more like this:

score 0 · Accepted Answer · answered Jul 19 '17 at 16:28

0

It works when you add position: relative to .tile. I guess it is because position: absolute pulls the element out of the flow of the tile.

answered Jul 19 '17 at 16:28

Björn Tantau

1,564
14
13

I realized positioning the tile either absolutely *or* relatively fixes the problem... this sucks because the original behavior is what I'm experiencing with my masonry layout even though they are positioned absolutely. – Jul 19 '17 at 16:29

score 0 · Answer 2 · answered Jul 19 '17 at 16:28

0

It's because of position: absolute;. See this answer: CSS overflow hidden with absolute position.

answered Jul 19 '17 at 16:28

SkunkDog

11
4

Why doesn't overflow: hidden work with material icons?

2 Answers2