title: Tailwind - How Flex-No-Shrink and Flex-Wrap Work
body: <p>I have two issues,</p>
  
  <ol>
  <li><p>"Flex-no-shrink" does not work when I specify width(say w-1/5)... Isn't this possible? As soon as when I specify some width on a div, all flex properties seem to be not working.  (My goal here is since it's a sidebar div, I want the width to remain the same in all sections of my app, however in some sections my sidebar content is shorter, therefore I end up having a sidebar with different width across my site)</p></li>
  <li><p>Similar problem exists for my "flex-wrap" as well. If I dont specify the width of the child divs, flex wrap works as I resize my browser.  When I specify width, divs will start shrinking without jumping to bottom.   </p></li>
  </ol>
  
  <pre><code>&lt;div class="mt-2 mb-5 pl-4"&gt;
       &lt;div class="flex w-full"&gt;
           &lt;div class="flex-no-shrink w-1/5 bg-white border-sidebarborder border rounded shadow my-2 pt-3 px-2"&gt;
               @yield('sidebarmenu')
           &lt;/div&gt;
  
           &lt;div class="bg-white m-2 border border-contentborder rounded shadow border-sidebarborder w-full"&gt;
               @yield ('content')
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong here? </p>
  
  <p>Thanks.
  Sidebar is structured as below; </p>
  
  <pre><code>&lt;ul class="sidebar-ul"&gt;
      &lt;label class="sidebarheader"&gt;Management &lt;/label&gt;
      &lt;li class="sidebar-li sidebar-li:hover"&gt; &lt;a class="sidebar-a sidebar-a:hover"&gt; Item  &lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  
  </code></pre>
  
  <p>Since i use this through-out the site, i took it out to app.scss, style is as below;</p>
  
  <pre class="lang-css prettyprint-override"><code>.sidebarheader {
      background-color: #d5e5ef;
      @apply  block py-2 mb-1 px-2 text-sm capitalize;
  }
  .sidebar-li {
      @apply pb-1 px-3;
  }
  .sidebar-li:hover {
  background-color: #f3f3f3;
  }
  
  .sidebar-a {
      color:navy;
      font-size:13px;
      @apply no-underline;
  }
  
  .sidebar-a:hover {
      color: #3f71b1;
      @apply underline;
  }
  
  .sidebar-ul {
      @apply list-reset w-full pb-6 ;
  }
  
  
  </code></pre>