2017-5-12
MicrosoftのFluentDesignSystemがChromeで崩れる理由
検証環境
Mac Chrome 58.0.3029.96
結論
root 要素の font-size 指定が、Chrome の最小フォントサイズ指定を下回る場合（デフォルトだと 10px）、Chrome で padding や margin の rem が正常に計算されなくなる。
詳細
Chrome のバージョンアップによって修正されれば別ですが、Chrome とそれ以外で表示が違うはずです。
（Chrome では異常に padding、margin が大きくなる）
上記デモページでは CSS を以下のようにしています。
* {
margin: 0;
padding: 0;
}
html {
font-size: 1px;
}
p {
background: #000;
color: #fff;
font-size: 16rem;
padding: 16rem;
margin-bottom: 16rem;
}
rem は root 要素（今回の場合 html）の font-size に応じて変化するので、p タグの font-size/padding/margin-bottom は全て 16px になるはずです。実際 Chrome 以外ではそのようになっています。
ただ、Chrome の場合「最小フォントサイズ」という設定があり、デフォルトでこれは 10px に設定されています。そのため、DevTools の Elements タブで html タグの Computed を確認すると font-size が 10px になってしまっています。
ここで p タグの font-size に関しては、html タグの大元の設定（1px）を元に font-size を計算しているのか、正常に 16px で表示されます。
ただ、p タグの padding/margin に関しては html タグに対して最小フォントサイズが適用された 10px という値を元に計算してしまっているのか、Chrome だけ padding/margin が 160px になってしまっています。
このように「root 要素に最小フォントサイズが適用された後の値を元に margin/padding の rem を計算してしまっている」という挙動を Chrome がしてしまっています。
FluentDesignSystem のサイトでは、root 要素の font-size に vw が使われており、大体 0.5~1.5px の間を遷移しています。
さらに padding/margin に rem が使われているため前述の挙動が発生してしまっている形になります。
まとめ
font-size に関しては Chrome が気を利かして最小フォントサイズ適用前の値を元に計算しているのに、margin/padding に関してはそうなってないのは恐らく実装ミスかなという感じなので、Chrome のバージョンアップで早い内に修正されるのではないでしょうか。（root 要素の font-size に 10px 未満の値を指定した上で margin/padding に rem を使うと言った状況が無かったので全く気づきませんでした。）
追記（2017.5.13）
どうも 2 年程前に既に Apple のヘルプページで同じ原因と思われる現象が発生していた模様。
Chrome で Apple の公式ヘルプページの表示が崩れる問題発生中
root 要素の font-size が 10px 未満にならないよう気をつければ回避出来るとはいえ、仕様外の挙動っぽいので出来れば直して欲しい所。