.content { display: grid; grid-template-areas: "tabs" "window"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: calc(100vh); } .nav-tabs-container { grid-area: tabs; padding: 0px; background-color: #999999; border-bottom: 4px solid #CCCCCC; } .tab-content { grid-area: window; background-color: white; padding: 0px; display:none; } .tab-content.tab-default { display: block; } ul.nav-tabs { padding: 0px; margin: 0px; overflow: auto; display: table-row; min-height: 2ex; } .nav-tabs li { display: inline-block; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; min-width: 20px; text-decoration: none; color: black; text-align: center; user-select: none; cursor: pointer; } .nav-tabs li:hover { background-color: #EEEEEE; } .nav-tabs li.active { background-color: #CCCCCC; }