JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="app">
  <!-- SOME OTHER ELEMENTS BUT REMOVED SO THE CODE WOULD BE SHORTED -->
  <div class="workspace">
    <nav class="nav navbar navbar-inverse">
      <ul class="navbar-nav">
        <!-- Comment out the first 'li' group below to see the difference -->
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some very long text that should be truncated again</div>
          </a>
        </li>
        <!-- Comment out the 'li' group above to see the difference -->
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some</div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some</div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some</div>
          </a>
        </li>
        <li>
          <div class="dropdown-divider"></div>
        </li>
        <!-- Bunch of links for scroll to appear -->
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some</div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link bookmark">
            <img src="https://ads-by.madadsmedia.com/images/cancel-red.png">
            <div class="icon-text">Some</div>
          </a>
        </li>
        <li class="nav-item">
          <a...

SCSS

.app {   // this style should not be removed and hopefully not modified (unless I absolutely must)
    display: flex; 
    flex-direction: column; 
    flex: 1 1 auto;
    height: 100vh; 
    overflow: hidden;
}
.workspace {  // this style should not be removed and hopefully not modified (unless I absolutely must)
    display: flex; 
    flex: 1 1 0;
    flex-direction: row;
    overflow: inherit;
    background: #ffffff;
}

/* Below are styles for navigation and the solution lies somewhere within */
.navbar {
    padding: 0;
    background:  #283030;
	height: 100%;
	overflow-y: auto;
}
li.nav-item {
  max-width: 65px;
}
li > .nav-link {
	//display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.75rem;
	color: white;
	//padding: 0.9rem;
	
	&.bookmark {
		padding: 0.35rem 0.3rem;
		display: block;
		text-align: center;
	}
}

li > .nav-link:hover {
    background-color: #595f5f;
}

li > .nav-link.active {
    background-color: #d32f2f ;
}

@media only screen and (max-width: 768px) {
    .nav-item {
        display: inline;
    }
    .navbar-nav {
        flex-direction: row;
    }
    .navbar {
        height: 75px;
        width: 100%;
    }
}

.icon-text {	
	/* max-width: 65px; */
	font-size: 10px;
	text-align: center;
}

a:not(.active) .icon-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}