3 column fluid layout with expanding middle div based on panel positions

Question

Apologies for the not-super-descriptive title, I'm having a hard time verbalizing the problem, so let me try again in more detail.

I am using flexbox to create a 3 column layout, where I'm looking to have the middle column expand when either (or both) of the left / right columns (menu panels) are collapsed.

Here's a screen shot of the problem I'm experiencing. https://www.dropbox.com/s/d9mcg7q71hwogog/example.jpg?dl=0

When the panels are open (expanded) all three columns fill the width of the screen. This is good. However, when either of the two sidepanels is animated (collapsed), the center column does not expand to fill in the additional space. This is not good.

I'm not sure if it has to do with the fact that I'm using translateX to toggle the left / right panels and this is a just a theory, but perhaps the center column doesn't realize that the left / right columns have shifted position, so it doesn't know there's more space to fill?

Code to follow:

CSS:

<style>
    body {
        background-color: lightslategrey;
    }
    .red {
        background-color: lightcoral;
    }

    .green {
        background-color: lightgreen;
    }

    .grey {
        background-color: lightslategray;
    }

    * {
        box-sizing: border-box;
    }

    .ls-toggle, .rs-toggle {
        //position: fixed;
        z-index: 1;
        cursor: pointer;
        transition: 0.5s;
    }

    #left-sidebar, #right-sidebar {
        width: 250px;
        height: 100vh;
        transition: 0.5s;
    }

    #left-sidebar.is-closed {
        transform: translateX(-80%);
    }

    #right-sidebar.is-closed {
        transform: translateX(80%);
    }

    .ls-top, .rs-top {
        display: flex;
        width:100%;
        height:35px;
        align-items: center;
        justify-content: flex-end;
        background-color: lightslategrey;
    }

    .rs-top {
        justify-content: flex-start;
    }

    #mw-content {
        width: 100%;
        height: 100vh;
    }
</style>

HTML:

<div class="d-flex">
    <div id="left-sidebar" class="col- red">
        <div class='ls-top grey'>
            <button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
        </div>
    </div>

    <div id="mw-content" class="col green">
        <h3> Main Window Content.</h3>
    </div>

    <div id="right-sidebar" class="col- red">
        <div class='rs-top grey'>
            <button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
        </div>
    </div>
</div>

JS:

$(document).ready(function () {
        var lsToggleBtn = document.querySelector('.ls-toggle');
        var lsSidebar = document.querySelector('#left-sidebar');
        var rsToggleBtn = document.querySelector('.rs-toggle');
        var rsSidebar = document.querySelector('#right-sidebar');

        lsToggleBtn.addEventListener('click', function () {
            lsToggleBtn.classList.toggle('is-closed');
            lsSidebar.classList.toggle('is-closed');
        });

        rsToggleBtn.addEventListener('click', function () {
            rsToggleBtn.classList.toggle('is-closed');
            rsSidebar.classList.toggle('is-closed');
        });
    });

Things I've tried:

• Adding flex: 1 1 auto to main content container (mw-content).
• Adding flex: 0 to l/r sidebar containers & flex: 1 1 auto to main content container
• Setting width to 100% on main content container
• Attempting to use translateX on main content container & setting new width when clicking left sidebar

Obviously none of those ideas worked, and I freely admit I'm not the greatest with flexbox, so I'm sure I'm just missing something basic, but I'd appreciate any suggestions you fine folks might have. :)

Answer 1

You need to play with "position: absolute" and add two more classList.toggle functions

$(document).ready(function () {
  var mwContent = document.querySelector('#mw-content');          // !!
  var lsToggleBtn = document.querySelector('.ls-toggle');
  var lsSidebar = document.querySelector('#left-sidebar');
  var rsToggleBtn = document.querySelector('.rs-toggle');
  var rsSidebar = document.querySelector('#right-sidebar');

  lsToggleBtn.addEventListener('click', function () {
    lsToggleBtn.classList.toggle('is-closed');
    lsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('ls-pos');         // here
  });

  rsToggleBtn.addEventListener('click', function () {
    rsToggleBtn.classList.toggle('is-closed');
    rsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('rs-pos');         // here
  });
});

body {
  background-color: lightslategrey;
  margin: 0;
  overflow: hidden;
}

.red {
  background-color: lightcoral;
}

.green {
  background-color: lightgreen;
}

.grey {
  background-color: lightslategray;
}

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  position: relative;
}

.ls-toggle,
.rs-toggle {
  cursor: pointer;
  transition: 0.5s;
}

#left-sidebar {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#right-sidebar {
  position: absolute;
  right: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#left-sidebar.is-closed {
  transform: translateX(-80%);
}

#right-sidebar.is-closed {
  transform: translateX(80%);
}

.ls-top,
.rs-top {
  display: flex;
  width: 100%;
  height: 35px;
  align-items: center;
  justify-content: flex-end;
  background-color: lightslategrey;
}

.rs-top {
  justify-content: flex-start;
}

#mw-content {
  position: absolute;
  right: 250px;
  left: 250px;
  height: 100vh;
  transition: 0.5s;
}

.ls-pos {
  left: 50px !important;
  transition: 0.5s;
}

.rs-pos {
  right: 50px !important;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div class="d-flex">
    <div id="left-sidebar" class="col red">
      <div class='ls-top grey'>
        <button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
      </div>
    </div>

    <div id="mw-content" class="col green">
      <h3> Main Window Content.</h3>
    </div>

    <div id="right-sidebar" class="col red">
      <div class='rs-top grey'>
        <button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
      </div>
    </div>
  </div>