Hypertabs { display: flex flex-direction: column height: 100% /* needed to stop scroller blowing out */ nav { display: flex background: linear-gradient(to bottom, #efefef, #e5e5e5) section.tabs { flex-grow: 1 display: flex min-width: 0 div.tab { flex-grow: 1 display: flex align-items: center justify-content: space-between font-size: .9rem background-color: #efefef overflow-x: hidden padding: 0 .4rem margin-left: .6rem border: 1px gainsboro solid border-bottom: none -selected { color: #222 background-color: #fff a.close { visibility: visible } } -notify { background-color: orange; } a { color: #666 :hover { color: #0088cc text-decoration: none } } a.link { flex-grow: 1 flex-shrink: 0 overflow-x: hidden min-width: 0 max-width: 90% white-space: nowrap text-overflow: ellipsis } a.close { visibility: hidden } } } div.extra { display: flex align-items: center } } section.content { display: flex height: 100% /* needed to stop making nav weird */ div.page { flex-grow: 1 display: flex /*hack to get give Scroller context it needs */ padding-top: .2rem } } }