Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="main-view">
    
 
<div class="rows ">
  <div class="head">
    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test    test
  </div>
  <div class="main scroll">
    <ul class="">
      <li>Header 1</li>
      <li>Header 2</li>
      <li>Header 3</li>
      <li>Header 4</li>
      <li>Header 5</li>
      <li>Header 6</li>
      <li>Header 7</li>
      <li>Header 8</li>
      <li>Header 9</li>
      <li>Header 10</li>
      <li>Header 11</li>
      <li>Header 12</li>
      <li>Header 13</li>
      <li>Header 14</li>
      <li>Header 15</li>
      <li>Header 16</li>
      <li>Header 17</li>
      <li>Header 18</li>
      <li>Header 19</li>
      <li>Header 20</li>
      <li>Header 21</li>
      <li>Header 22</li>
      <li>Header 23</li>
      <li>Header 24</li>
      <li>Header 25</li>
      <li>Header 26</li>
      <li>Header 27</li>
      <li>Header 28</li>
      <li>Header 29</li>
      <li>Header 30</li>
      <li>Header 31</li>
      <li>Header 32</li>
      <li>Header 33</li>
      <li>Header 34</li>
      <li>Header 35</li>
      <li>Header 36</li>
      <li>Header 37</li>
      <li>Header 38</li>
      <li>Header 39</li>
      <li>Header 40</li>
      <li>Header 41</li>
      <li>Header 42</li>
      <li>Header 43</li>
      <li>Header 44</li>
      <li>Header 45</li>
      <li>Header 46</li>
      <li>Header 47</li>
      <li>Header 48</li>
      <li>Header 49</li>
      <li>Header 50</li>
      <li>Header 51</li>
      <li>Header 52</li>
      <li>Header 53</li>
      <li>Header 54</li>
      <li>Header 55</li>
      <li>Header 56</li>
      <li>Header 57</li>
      <li>Header 58</li>
      <li>Header 59</li>
      <li>Header 60</li>
      <li>Header 61</li>
      <li>Header 62</li>
      <li>Header 63</li>
      <li>Header 64</li>
      <li>Header 65</li>
      <li>Header 66</li>
      <li>Header 67</li>
      <li>Header 68</li>
      <li>Header 69</li>
      <li>Header 70</li>
      <li>Header 71</li>
      <li>Header 72</li>
      <li>Header 73</li>
      <li>Header 74</li>
      <li>Header 75</li>
      <li>Header 76</li>
      <li>Header 77</li>
      <li>Header 78</li>
      <li>Header 79</li>
      <li>Header 80</li>
      <li>Header 81</li>
      <li>Header 82</li>
      <li>Header 83</li>
      <li>Header 84</li>
      <li>Header 85</li>
      <li>Header 86</li>
      <li>Header 87</li>
      <li>Header 88</li>
      <li>Header 89</li>
      <li>Header 90</li>
      <li>Header 91</li>
      <li>Header 92</li>
      <li>Header 93</li>
      <li>Header 94</li>
      <li>Header 95</li>
      <li>Header 96</li>
      <li>Header 97</li>
      <li>Header 98</li>
      <li>Header 99</li>
      <li>Header 100</li>
      <li>Header 101</li>
      <li>Header 102</li>
      <li>Header 103</li>
      <li>Header 104</li>
      <li>Header 105</li>
      <li>Header 106</li>
      <li>Header 107</li>
      <li>Header 108</li>
      <li>Header 109</li>
      <li>Header 110</li>
      <li>Header 111</li>
      <li>Header 112</li>
      <li>Header 113</li>
      <li>Header 114</li>
      <li>Header 115</li>
      <li>Header 116</li>
      <li>Header 117</li>
      <li>Header 118</li>
      <li>Header 119</li>
      <li>Header 120</li>
      <li>Header 121</li>
      <li>Header 122</li>
      <li>Header 123</li>
      <li>Header 124</li>
      <li>Header 125</li>
      <li>Header 126</li>
      <li>Header 127</li>
      <li>Header 128</li>
      <li>Header 129</li>
      <li>Header 130</li>
      <li>Header 131</li>
      <li>Header 132</li>
      <li>Header 133</li>
      <li>Header 134</li>
      <li>Header 135</li>
      <li>Header 136</li>
      <li>Header 137</li>
      <li>Header 138</li>
      <li>Header 139</li>
      <li>Header 140</li>
      <li>Header 141</li>
      <li>Header 142</li>
      <li>Header 143</li>
      <li>Header 144</li>
      <li>Header 145</li>
      <li>Header 146</li>
      <li>Header 147</li>
      <li>Header 148</li>
      <li>Header 149</li>
      <li>Header 150</li>
      <li>Header 151</li>
      <li>Header 152</li>
      <li>Header 153</li>
      <li>Header 154</li>
      <li>Header 155</li>
      <li>Header 156</li>
      <li>Header 157</li>
      <li>Header 158</li>
      <li>Header 159</li>
      <li>Header 160</li>
      <li>Header 161</li>
      <li>Header 162</li>
      <li>Header 163</li>
      <li>Header 164</li>
      <li>Header 165</li>
      <li>Header 166</li>
      <li>Header 167</li>
      <li>Header 168</li>
      <li>Header 169</li>
      <li>Header 170</li>
      <li>Header 171</li>
      <li>Header 172</li>
      <li>Header 173</li>
      <li>Header 174</li>
      <li>Header 175</li>
      <li>Header 176</li>
      <li>Header 177</li>
      <li>Header 178</li>
      <li>Header 179</li>
      <li>Header 180</li>
      <li>Header 181</li>
      <li>Header 182</li>
      <li>Header 183</li>
      <li>Header 184</li>
      <li>Header 185</li>
      <li>Header 186</li>
      <li>Header 187</li>
      <li>Header 188</li>
      <li>Header 189</li>
      <li>Header 190</li>
      <li>Header 191</li>
      <li>Header 192</li>
      <li>Header 193</li>
      <li>Header 194</li>
      <li>Header 195</li>
      <li>Header 196</li>
      <li>Header 197</li>
      <li>Header 198</li>
      <li>Header 199</li>
      <li>Header 200</li>
      <li>Header 201</li>
      <li>Header 202</li>
      <li>Header 203</li>
      <li>Header 204</li>
      <li>Header 205</li>
      <li>Header 206</li>
      <li>Header 207</li>
      <li>Header 208</li>
      <li>Header 209</li>
      <li>Header 210</li>
      <li>Header 211</li>
      <li>Header 212</li>
      <li>Header 213</li>
      <li>Header 214</li>
      <li>Header 215</li>
      <li>Header 216</li>
      <li>Header 217</li>
      <li>Header 218</li>
      <li>Header 219</li>
      <li>Header 220</li>
      <li>Header 221</li>
      <li>Header 222</li>
      <li>Header 223</li>
      <li>Header 224</li>
      <li>Header 225</li>
      <li>Header 226</li>
      <li>Header 227</li>
      <li>Header 228</li>
      <li>Header 229</li>
      <li>Header 230</li>
      <li>Header 231</li>
      <li>Header 232</li>
      <li>Header 233</li>
      <li>Header 234</li>
      <li>Header 235</li>
      <li>Header 236</li>
      <li>Header 237</li>
      <li>Header 238</li>
      <li>Header 239</li>
      <li>Header 240</li>
      <li>Header 241</li>
      <li>Header 242</li>
      <li>Header 243</li>
      <li>Header 244</li>
      <li>Header 245</li>
      <li>Header 246</li>
      <li>Header 247</li>
      <li>Header 248</li>
      <li>Header 249</li>
      <li>Header 250</li>
      <li>Header 251</li>
      <li>Header 252</li>
      <li>Header 253</li>
      <li>Header 254</li>
      <li>Header 255</li>
      <li>Header 256</li>
      <li>Header 257</li>
      <li>Header 258</li>
      <li>Header 259</li>
      <li>Header 260</li>
      <li>Header 261</li>
      <li>Header 262</li>
      <li>Header 263</li>
      <li>Header 264</li>
      <li>Header 265</li>
      <li>Header 266</li>
      <li>Header 267</li>
      <li>Header 268</li>
      <li>Header 269</li>
      <li>Header 270</li>
      <li>Header 271</li>
      <li>Header 272</li>
      <li>Header 273</li>
      <li>Header 274</li>
      <li>Header 275</li>
      <li>Header 276</li>
      <li>Header 277</li>
      <li>Header 278</li>
      <li>Header 279</li>
      <li>Header 280</li>
      <li>Header 281</li>
      <li>Header 282</li>
      <li>Header 283</li>
      <li>Header 284</li>
      <li>Header 285</li>
      <li>Header 286</li>
      <li>Header 287</li>
      <li>Header 288</li>
      <li>Header 289</li>
      <li>Header 290</li>
      <li>Header 291</li>
      <li>Header 292</li>
      <li>Header 293</li>
      <li>Header 294</li>
      <li>Header 295</li>
      <li>Header 296</li>
      <li>Header 297</li>
      <li>Header 298</li>
      <li>Header 299</li>
      <li>Header 300</li>
      <li>Header 301</li>
      <li>Header 302</li>
      <li>Header 303</li>
      <li>Header 304</li>
      <li>Header 305</li>
      <li>Header 306</li>
      <li>Header 307</li>
      <li>Header 308</li>
      <li>Header 309</li>
      <li>Header 310</li>
      <li>Header 311</li>
      <li>Header 312</li>
      <li>Header 313</li>
      <li>Header 314</li>
      <li>Header 315</li>
      <li>Header 316</li>
      <li>Header 317</li>
      <li>Header 318</li>
      <li>Header 319</li>
      <li>Header 320</li>
      <li>Header 321</li>
      <li>Header 322</li>
      <li>Header 323</li>
      <li>Header 324</li>
      <li>Header 325</li>
      <li>Header 326</li>
      <li>Header 327</li>
      <li>Header 328</li>
      <li>Header 329</li>
      <li>Header 330</li>
      <li>Header 331</li>
      <li>Header 332</li>
      <li>Header 333</li>
      <li>Header 334</li>
      <li>Header 335</li>
      <li>Header 336</li>
      <li>Header 337</li>
      <li>Header 338</li>
      <li>Header 339</li>
      <li>Header 340</li>
      <li>Header 341</li>
      <li>Header 342</li>
      <li>Header 343</li>
      <li>Header 344</li>
      <li>Header 345</li>
      <li>Header 346</li>
      <li>Header 347</li>
      <li>Header 348</li>
      <li>Header 349</li>
      <li>Header 350</li>
      <li>Header 351</li>
      <li>Header 352</li>
      <li>Header 353</li>
      <li>Header 354</li>
      <li>Header 355</li>
      <li>Header 356</li>
      <li>Header 357</li>
      <li>Header 358</li>
      <li>Header 359</li>
      <li>Header 360</li>
      <li>Header 361</li>
      <li>Header 362</li>
      <li>Header 363</li>
      <li>Header 364</li>
      <li>Header 365</li>
      <li>Header 366</li>
      <li>Header 367</li>
      <li>Header 368</li>
      <li>Header 369</li>
      <li>Header 370</li>
      <li>Header 371</li>
      <li>Header 372</li>
      <li>Header 373</li>
      <li>Header 374</li>
      <li>Header 375</li>
      <li>Header 376</li>
      <li>Header 377</li>
      <li>Header 378</li>
      <li>Header 379</li>
      <li>Header 380</li>
      <li>Header 381</li>
      <li>Header 382</li>
      <li>Header 383</li>
      <li>Header 384</li>
      <li>Header 385</li>
      <li>Header 386</li>
      <li>Header 387</li>
      <li>Header 388</li>
      <li>Header 389</li>
      <li>Header 390</li>
      <li>Header 391</li>
      <li>Header 392</li>
      <li>Header 393</li>
      <li>Header 394</li>
      <li>Header 395</li>
      <li>Header 396</li>
      <li>Header 397</li>
      <li>Header 398</li>
      <li>Header 399</li>
      <li>Header 400</li>
      <li>Header 401</li>
      <li>Header 402</li>
      <li>Header 403</li>
      <li>Header 404</li>
      <li>Header 405</li>
      <li>Header 406</li>
      <li>Header 407</li>
      <li>Header 408</li>
      <li>Header 409</li>
      <li>Header 410</li>
      <li>Header 411</li>
      <li>Header 412</li>
      <li>Header 413</li>
      <li>Header 414</li>
      <li>Header 415</li>
      <li>Header 416</li>
      <li>Header 417</li>
      <li>Header 418</li>
      <li>Header 419</li>
      <li>Header 420</li>
      <li>Header 421</li>
      <li>Header 422</li>
      <li>Header 423</li>
      <li>Header 424</li>
      <li>Header 425</li>
      <li>Header 426</li>
      <li>Header 427</li>
      <li>Header 428</li>
      <li>Header 429</li>
      <li>Header 430</li>
      <li>Header 431</li>
      <li>Header 432</li>
      <li>Header 433</li>
      <li>Header 434</li>
      <li>Header 435</li>
      <li>Header 436</li>
      <li>Header 437</li>
      <li>Header 438</li>
      <li>Header 439</li>
      <li>Header 440</li>
      <li>Header 441</li>
      <li>Header 442</li>
      <li>Header 443</li>
      <li>Header 444</li>
      <li>Header 445</li>
      <li>Header 446</li>
      <li>Header 447</li>
      <li>Header 448</li>
      <li>Header 449</li>
      <li>Header 450</li>
      <li>Header 451</li>
      <li>Header 452</li>
      <li>Header 453</li>
      <li>Header 454</li>
      <li>Header 455</li>
      <li>Header 456</li>
      <li>Header 457</li>
      <li>Header 458</li>
      <li>Header 459</li>
      <li>Header 460</li>
      <li>Header 461</li>
      <li>Header 462</li>
      <li>Header 463</li>
      <li>Header 464</li>
      <li>Header 465</li>
      <li>Header 466</li>
      <li>Header 467</li>
      <li>Header 468</li>
      <li>Header 469</li>
      <li>Header 470</li>
      <li>Header 471</li>
      <li>Header 472</li>
      <li>Header 473</li>
      <li>Header 474</li>
      <li>Header 475</li>
      <li>Header 476</li>
      <li>Header 477</li>
      <li>Header 478</li>
      <li>Header 479</li>
      <li>Header 480</li>
      <li>Header 481</li>
      <li>Header 482</li>
      <li>Header 483</li>
      <li>Header 484</li>
      <li>Header 485</li>
      <li>Header 486</li>
      <li>Header 487</li>
      <li>Header 488</li>
      <li>Header 489</li>
      <li>Header 490</li>
      <li>Header 491</li>
      <li>Header 492</li>
      <li>Header 493</li>
      <li>Header 494</li>
      <li>Header 495</li>
      <li>Header 496</li>
      <li>Header 497</li>
      <li>Header 498</li>
      <li>Header 499</li>
      <li>Header 500</li>
    </ul>
  </div>
  <div>
    footer
  </div>
</div>
     </div>
</body>
</html>
 
.rows,
.columns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
​
.rows > * {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
​
.rows.tabbable > div {
  margin-bottom: 10px;
}
​
.rows.tabbable ul {
  margin: 0;
}
​
.columns {
  -webkit-flex-direction: row;
  flex-direction: row;
  max-height: 100%;
  overflow: hidden;
}
​
.main {
  flex: 1;
}
​
.scroll {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
}
​
.scroll > * {
  margin: 0;
  width: 100%;
  overflow: auto;
  padding-right: 25px;
}
​
​
html,
body,
#main-container,
#main-view,
.scrollable {
  height: 100%;
  margin: 0
}
​
#main-view > div {
  max-height: 100%;
  display: flex;
}
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers