Grid, dynamic sidebar/navbar width with main 100% width

[frederikhors]

I need a simple main div column 100% full.

Sometimes a sidebar can appear, with dynamic width.

REPL: https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku

In this example you can see I'm not able to change sidebar width (which has every time a new width value) and I'm not able to "stretch" main div to 100% width.

How to do?

<div class="min-h-screen grid grid-cols-12">

  <div class="bg-green-500">
    <div style={`width: ${randomWidth}px !important;`}>
      Sidebar. This has dynamic width.
    </div>
  </div>

  <div class="bg-red-500">
    Main. This has full width.
  </div>

</div>

https://stackoverflow.com/posts/61816796

[robbyrice]

Instead of using the grid utilities you might want to look into using the flexbox utilities for this layout. It might look something like this.

<div class="min-h-screen flex">

  <div style="bg-green-500 {`width: ${randomWidth}px !important;`}">
      Sidebar. This has dynamic width.
  </div>

  <div class="bg-red-500 flex-grow">
    Main. This has full width.
  </div>

</div>

[frederikhors]

I fixed it with flexbox. Thanks.

[robbyrice]

You're welcome. Happy to have helped.