1178783-1.html (3004B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 * 6 { 7 margin: 0; 8 padding: 0; 9 } 10 html 11 { 12 height: 100%; 13 display: flex; 14 flex-flow: row nowrap; 15 } 16 body 17 { 18 flex: 1 1 0px; 19 min-width: 0; 20 display: flex; 21 flex-flow: row nowrap; 22 } 23 ul 24 { 25 list-style: none; 26 } 27 .vertical 28 { 29 flex: 1 1 0px; 30 min-width: 0; 31 display: flex; 32 flex-flow: column nowrap; 33 } 34 .vertical > li:first-child 35 { 36 flex: 1 1 0px; 37 min-height: 0; 38 background-color: #0ff; 39 } 40 .vertical > li:last-child 41 { 42 flex: 0 0 0px; 43 min-height: 0; 44 background-color: #f0f; 45 display: flex; 46 flex-flow: row nowrap; 47 } 48 .horizontal-separator 49 { 50 flex: 0 0 5px; 51 cursor: row-resize; 52 background-color: #fff; 53 } 54 </style> 55 </head> 56 <body> 57 <ul class="vertical"> 58 <li></li> 59 <li class="horizontal-separator"></li> 60 <li> 61 <ul class="vertical"> 62 <li></li> 63 <li class="horizontal-separator"></li> 64 <li> 65 <ul class="vertical"> 66 <li></li> 67 <li class="horizontal-separator"></li> 68 <li> 69 <ul class="vertical"> 70 <li></li> 71 <li class="horizontal-separator"></li> 72 <li> 73 <ul class="vertical"> 74 <li></li> 75 <li class="horizontal-separator"></li> 76 <li> 77 <ul class="vertical"> 78 <li></li> 79 <li class="horizontal-separator"></li> 80 <li> 81 <ul class="vertical"> 82 <li></li> 83 <li class="horizontal-separator"></li> 84 <li> 85 <ul class="vertical"> 86 <li></li> 87 <li class="horizontal-separator"></li> 88 <li> 89 <ul class="vertical"> 90 <li></li> 91 <li class="horizontal-separator"></li> 92 <li> 93 <ul class="vertical"> 94 <li></li> 95 <li class="horizontal-separator"></li> 96 <li> 97 <ul class="vertical"> 98 <li></li> 99 <li class="horizontal-separator"></li> 100 <li> 101 <ul class="vertical"> 102 <li></li> 103 <li class="horizontal-separator"></li> 104 <li> 105 <ul class="vertical"> 106 <li></li> 107 <li class="horizontal-separator"></li> 108 <li> 109 <ul class="vertical"> 110 <li></li> 111 <li class="horizontal-separator"></li> 112 <li> 113 <ul class="vertical"> 114 <li></li> 115 <li class="horizontal-separator"></li> 116 <li> 117 <ul class="vertical"> 118 <li></li> 119 <li class="horizontal-separator"></li> 120 <li> 121 <ul class="vertical"> 122 <li></li> 123 <li class="horizontal-separator"></li> 124 <li> 125 <ul class="vertical"> 126 <li></li> 127 <li class="horizontal-separator"></li> 128 <li> 129 <ul class="vertical"> 130 <li></li> 131 <li class="horizontal-separator"></li> 132 <li> 133 <ul class="vertical"> 134 <li></li> 135 <li class="horizontal-separator"></li> 136 <li> 137 <ul class="vertical"> 138 <li></li> 139 <li class="horizontal-separator"></li> 140 <li> 141 <ul class="vertical"> 142 <li></li> 143 <li class="horizontal-separator"></li> 144 <li> 145 <ul class="vertical"> 146 <li></li> 147 <li class="horizontal-separator"></li> 148 <li> 149 <ul class="vertical"> 150 <li></li> 151 <li class="horizontal-separator"></li> 152 <li> 153 <ul class="vertical"> 154 <li></li> 155 <li class="horizontal-separator"></li> 156 <li> 157 <!-- ... etc ... -->