JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function expand() {

	var sidebar = document.querySelector(".sidebar");
  sidebar.classList.add("sidebar--expanded");

}
</script>

<div class="container">

    <div class="sidebar">
        <button onclick="expand()">
        Sidebar
        </button> 

    </div>
    
    <div class="main-content">
        <div class="header">
            header

        </div>
        <div class="content">
        
        <div class="blade">
        <div class="long-content">
                Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.
            </div>
        </div>
        <div class="blade">
        <div class="long-content">
                Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.
            </div>
        </div>
        
            <div class="blade">
        <div class="long-content">
                Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add...

CSS

button{
  max-width:60px;
  max-height:30px;
}

.container{
  display:flex;
  overflow-x:hidden;
  
  
}
.sidebar{
  background:red;
  height:100vh;
  display:flex;
  flex:0 0 70px;
  
}

.sidebar--expanded{
  
  flex:0 0 100px;
  
}
.main-content{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  
  min-width: 0; /* NEW */

  
}
.header{
  background:blue;
  flex-grow:1;
  display:flex;
  color:white;
  justify-content:flex-end;
  flex:0 0 30px;
}
.content{
  display:flex;
  color:white;
  background:teal;
  flex-grow:1;
  width:100%;
}

.long-content{
  
  overflow-x:auto;
  white-space:nowrap;
}

.blade{
  border:1px solid red;
  padding:5px;
  flex-grow:1;
    
    min-width: 0; /* NEW */
}