title: How to stop resizing div element when it reaches the specific width?
body: <p>I tried to make a site with a resizable sidebar using <code>jquery-resizable.js</code>. What I want to do is making stop resizing once it reaches the specific width. However, it keeps moving even though it is already over the min-width value. I found the <code>ResizeObserver</code> to detect the changing width values and tried to change the div element's CSS values like <code>resize:none;</code> but it didn't work.</p>
  <p><strong>How could I stop resizing once it reaches a certain width value?</strong></p>
  <p>Here are my codes.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".panel-left").resizable({
      handleSelector: ".splitter",
      resizeHeight: false,
      resizeHeightFrom:'center',
  });
  
  var ro = new ResizeObserver(entries =&gt; {
    for (let entry of entries) {
      const cr = entry.contentRect;
      console.log('Element:', entry.target);
      console.log(`Element size: ${cr.width}px x ${cr.height}px`);
      console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  
      if (cr.width &lt;= 330) {
        console.log("its too small");
        cr.css('resize', 'none');
      }
    }
  });
  
  ro.observe(document.querySelector('.panel-right'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-container {
      display: flex;
      flex-direction: row;
      border: 1px solid silver;
      overflow: hidden;
  }
  
  .panel-left {
      flex: 0 0 auto;
      padding: 10px;
      width: 900px;
      /* min-height: 100%; */
      min-width: 650px;
      white-space: nowrap;
      background: #8E44AD;
      color: white;
  }
  
  .panel-right {
      flex: 1 0 auto;
      padding: 10px;
      width: 300px;
      /* min-height: 100%; */
      min-width: 350px;
      background: #34495E;
      color: #fff;
      overflow-x: hidden;
  }
  
  .splitter {
      flex: 0 0 auto;
      width: 8px;
      background: url(images/vsizegrip.png) center center no-repeat #ccc;
      min-height: 100%;
      cursor: col-resize;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"&gt;&lt;/script&gt;
  
  &lt;div class="panel-container el" style="height:100%;"&gt;
      &lt;div class="panel-left resizable"&gt;
          left panel
      &lt;/div&gt;
  
      &lt;div class="splitter"&gt;
      &lt;/div&gt;
  
      &lt;div class="panel-right" id="panelRight"&gt;
          right panel
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>