From 814f8dc206b40a75cfab5d08792bb3c53e2a0f12 Mon Sep 17 00:00:00 2001
From: minwe <minwe@yunshipei.com>
Date: Wed, 18 May 2016 16:07:02 +0800
Subject: [PATCH] [fixed] make docs content scrollable on some Android UA,
 resolves #31

- tested on WeChat: Mozilla/5.0 (Linux; Android 5.0; SM-N9008V Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.2 TBS/036215 Safari/537.36 MicroMessenger/6.3.16.49_r03ae324.780 NetType/WIFI Language/zh_CN
- tested on UC: Mozilla/5.0 (Linux; U; Android 5.0; zh-CN; SM-N9008V Build/LRX21V) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/10.9.10.788 U3/0.8.0 Mobile Safari/534.30
---
 docs/_app/js/ComponentDoc.js      |  1 -
 docs/_app/style/_doc-common.scss  | 10 ----------
 docs/_app/style/_doc-content.scss | 17 ++++++++++++++++-
 docs/_app/style/_doc-sidebar.scss |  1 +
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/docs/_app/js/ComponentDoc.js b/docs/_app/js/ComponentDoc.js
index bb895a9..4d7d472 100644
--- a/docs/_app/js/ComponentDoc.js
+++ b/docs/_app/js/ComponentDoc.js
@@ -75,7 +75,6 @@ const ComponentDoc = React.createClass({
 
     return (
       <Container
-        direction="row"
         fill
         role="doc-main"
       >
diff --git a/docs/_app/style/_doc-common.scss b/docs/_app/style/_doc-common.scss
index 4c392bf..8ba4fa1 100644
--- a/docs/_app/style/_doc-common.scss
+++ b/docs/_app/style/_doc-common.scss
@@ -18,8 +18,6 @@ body {
 }
 
 .container-fill > .container-fill {
-  -webkit-flex: 1 1 0;
-  -ms-flex: 1 1 0;
   flex: 1 1 0;
   position: relative;
 }
@@ -34,8 +32,6 @@ body {
 
 .container-column,
 .container-row {
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   max-height: 100%;
   width: 100%;
@@ -43,21 +39,15 @@ body {
 
 .container-column > .container-fill,
 .container-row > .container-fill {
-  -webkit-flex: 1 1 0;
-  -ms-flex: 1 1 0;
   flex: 1 1 0;
   position: relative;
 }
 
 .container-column {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .container-row {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   height: auto;
 }
diff --git a/docs/_app/style/_doc-content.scss b/docs/_app/style/_doc-content.scss
index 5e565bb..70a6192 100644
--- a/docs/_app/style/_doc-content.scss
+++ b/docs/_app/style/_doc-content.scss
@@ -1,5 +1,20 @@
+[role="doc-main"] {
+  display: flex;
+
+  @media (min-width: 641px) {
+    flex-direction: row;
+  }
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    height: 100%;
+  }
+}
+
 .doc-content-container {
-  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/docs/_app/style/_doc-sidebar.scss b/docs/_app/style/_doc-sidebar.scss
index 763f2f5..1c5c8d7 100644
--- a/docs/_app/style/_doc-sidebar.scss
+++ b/docs/_app/style/_doc-sidebar.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 180px;
+  flex-shrink: 0;
   background: #fafafa;
   border-right: 1px solid #f0f0f0;