CSSがSafariでうまく動きません。。

Question

react.jsを使ってWebアプリを作成したのですが、
Safariだとどうしてもデザインが崩れてしまします。
Chrome,Firefoxは動作確認できました。。

-web-kitとかも使用しているので原因がわからなくて。。。。

もしわかるって方がいたら教えてください。

該当ページ

該当部コード

class List extends Component {
  componentWillMount () {
    this.props.actions.setTitle("自動車免許学科試験 | 過去問一覧")
    this.props.actions.setCanonical("http://menkyo.site/")
    this.props.actions.setBreads([{title: "リスト", url: "http://menkyo.site/problems"}])
  }

  render() {
    const style = {
      main: {
        margin: "16px",
        padding: "16px",
        backgroundColor: "#FFFFFF",
        flex: "1",
        display: "-webkit-flex",
        display: "-moz-flex",
        display: "-ms-flex",
        display: "-o-flex",
        display: "flex",
        overflow: "auto"
      },
      scroll: {
        minHeight: "-webkit-min-content",
        minHeight: "-moz-min-content",
        minHeight: "min-content",
        display: "-webkit-flex",
        display: "-moz-flex",
        display: "-ms-flex",
        display: "-o-flex",
        display: "flex",
        flexDirection: "column",
        WebkitFlexDirection: "column"
      }
    };
    return (
      <section key={"list"} style={style.main}>
        <div key={"style"} style={style.scroll}>
          {this.props.problems.map(item =>
            <Link to={"problems/" + item.id} key={item.id}>
              <h2 key={"text"+item.id}>題{item.id}門: {item.text}</h2>
            </Link>
          )}
        </div>
      </section>
    );
  }
}
// globalから取得してpropsに渡す
function mapStateToProps(state) {
  return {
    problems: state.default.problems.problems,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch),
  };
}
// problemsとactionsを渡す
//=> const { problems, actions } = this.props
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

Answer 1

題○門という表示のほうが気になりますが（第○問では？）そこは置いておいて…

この際CSSは関係ないでしょう。
まずエラーが出ているのでそこを解消したほうがいいかと思います。

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ホーム</span></a></li><li style="display:in
 (server) ホーム</span></a></li></ul></header><sectio

Reactやっててこんなエラー見たことないんですが、サーバとクライアントで異なるマークアップが生成されている？？？

CSS側で問題だなと思うのはflexの多用ですね。
使わなくてもいいところになんでもかんでもflexってついているなと感じました。
フッタのメニューを画面下に固定したいのであれば、ほかの方法で組んだほうがいいでしょう。

現在、html,body,#mainにheight:100%;がついていますが、これだけでは高さをディスプレイのサイズに固定できません。
そのためSafariの解釈では内容量に応じて高さが増え、結局フッタがページの一番下に追いやられています。

一度Reactから離れて、生成したいHTMLをベタで書き、スタイリングをしてみてはどうでしょうか？
それでうまくいくことが確認できてから、必要なコードだけをJSXに置き換えればいいと思います。