MutationObserver: How to observe mutations in widt

Question

Given the following DOM structure...

<div id="outer-container">
  <div class="side-panel"><div width="200px"/></div>
  <div id="content"><!-- some content --></div>
  <div class="side-panel"><div width="100px"/></div>
</div>

With the following CSS rules...

#outer-container {
  display: 'flex';
  align-items: 'stretch';
  width: '100vw';
  height: '100vh';
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: 'flex';
  flex-direction: 'column';
  align-items: 'stretch';
  flexGrow: 1;
}

How can I observe mutations to the width/height of #content?

This is typically done by observing mutations in the style attribute, and checking the bounds of the element (or some other variation) when the style has changed. However, being a flex container & child, I notice that when I inspect the width/height of the element, they are not defined.

Changes to the size of #content does not produce events from my MutationObserver (which uses the following config: {attributes: true, attributeFilter: ['style']})

My use case here is to turn the side panels into drawers when the #content width decreases below some defined threshold. I am working with React, however this seems to be a native html/js problem.

Help greatly appreciated!

PS: I tried setting flex-basis on #content to my chosen threshold, but this didn't help. I wonder if I should define a width instead of flex-basis.. however I'm unsure if this will produce undesired flex behaviour.

Answer 1

You can either use the offsetWidth/offsetHeight properties, the getBoundingClientRect() method or the getComputedStyle() method inside a function say, checkWidth() then invoke the function whenever an event or function alters your element's dimensions.

For example, a resize event will change your element's dimensions so run this function when a resize event is fired.

---

Check and run the following Code Snippet then resize your browser or click the button for a practical example of what I have described above:

/* JavaScript */

function checkWidth(){
  let e = document.getElementById("content");
  let widthA = window.getComputedStyle(e).width;
  let widthB = e.getBoundingClientRect().width;
  let widthC = e.offsetWidth;

  console.log("getComputedStyle: " + widthA);
  console.log("getBoundingClientRect: " + widthB);
  console.log("offsetWidth: " + widthC);
};

window.addEventListener("resize", checkWidth); //checkWidth() added since "resize" alters your element's dimensions

function editContent(){
  let e = document.getElementById("content");
  e.style.width = "300px";
  
  checkWidth(); //checkWidth() added since editContent() alters your element's dimensions
}

document.getElementById("btn").addEventListener("click", editContent);

/* CSS */

#outer-container {
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
}

<!-- HTML -->

<button id="btn">Click Me</button>
<hr/>
<div id="outer-container">
  <div class="side-panel">
    <div style="width: 200px">Left</div>
  </div>
  <div id="content">Middle</div>
  <div class="side-panel">
    <div style="width: 100px">Right</div>
  </div>
</div>