某庁の降雨地図のタイルを広範囲表できるよう

<style>
#container {
  width: 256px; height: 256px;
  overflow: hidden;
  border: 1px solid black;
}
#map {
  position: absolute; left: 64px; top: 64px;
  width: 512px; height: 512px;
  font-size: 0;
}
.tile {
  display: inline-block;
  position: relative;
  width: 256px; height: 256px;
}
.tile img {
  position: absolute; left: 0px; top: 0px;
}
</style>
<div id="container">
  <div id="map">
    <div class="tile"><img src="layer1/0_0.png"><img src="layer2/0_0.png"><img src="layer3/0_0.png"></div>
    <div class="tile"><img src="layer1/1_0.png"><img src="layer2/1_0.png"><img src="layer3/1_0.png"></div><br>
    <div class="tile"><img src="layer1/0_1.png"><img src="layer2/0_1.png"><img src="layer3/0_1.png"></div>
    <div class="tile"><img src="layer1/1_1.png"><img src="layer2/1_1.png"><img src="layer3/1_1.png"></div><br>
  </div>
</div>

みたいな感じにして自前で並べ、
overflow: hidden; 指定した div#container で囲った div#map を drag でスクロールさせようとしてみたんだけど、overflow: hidden; からはみ出た部分が隠れてくれない。

「overflow hidden 隠れない」でググったところ、以下のページが見つかった。

• Ika Lab. / 2015-05-08: positionとoverflow hiddenを併用する際の注意点

曰く、overflow: hidden; の内容物が position: absolute; だと hidden 付けた要素よりも上位の要素に absolute で貼り付いてしまうためこうなるんだそうで、hidden 付けた要素を relative にすることで、内容物を hidden の要素にぶら下げろとの事。
言われるがまま

#container {
  width: 256px; height: 256px;
  overflow: hidden;
  border: 1px solid black;
}

↓

#container {
  position: relative;
  width: 256px; height: 256px;
  overflow: hidden;
  border: 1px solid black;
}

としてみたところ、無事 hidden からはみ出た部分が隠れて消えてくれた。