Как остановить изменение размера элемента div, когда он достигает указанной c ширины?

Question

Я попытался создать сайт с изменяемой боковой панелью, используя jquery-resizable.js. Что я хочу сделать, так это остановить изменение размера, как только он достигнет указанной ширины c. Однако он продолжает движение, даже если он уже превышает значение минимальной ширины. Я нашел ResizeObserver для определения изменяющихся значений ширины и попытался изменить значения CSS элемента div, такие как resize:none;, но это не сработало.

Как я могу остановить изменение размера после этого достигает определенного значения ширины?

Вот мои коды.

$(".panel-left").resizable({
    handleSelector: ".splitter",
    resizeHeight: false,
    resizeHeightFrom:'center',
});

var ro = new ResizeObserver(entries => {
  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 <= 330) {
      console.log("its too small");
      cr.css('resize', 'none');
    }
  }
});

ro.observe(document.querySelector('.panel-right'));

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>

<div class="panel-container el" style="height:100%;">
    <div class="panel-left resizable">
        left panel
    </div>

    <div class="splitter">
    </div>

    <div class="panel-right" id="panelRight">
        right panel
    </div>
</div>

Answer 1

То, что вы пытаетесь сделать, возможно с max-width, как упомянуто @JHeth.

Вы можете установить min-width, чтобы установить минимальную ширину вашего div и max-width, чтобы остановиться на размере пикселя вы хотите.

.panel-left {
    min-width: 50px;
    max-width: 200px;
    width: 50%;
}

См. пример ниже:

$(".panel-left").resizable({
    handleSelector: ".splitter",
    resizeHeight: false,
    resizeHeightFrom:'center',
});

.panel-container {
    display: flex;
    flex-direction: row;
    border: 1px solid silver;
    overflow: hidden;
    width: 100%;
}

.panel-left {
    flex: 0 0 auto;
    padding: 10px;
    min-height: 100vh;
    min-width: 50px;
    max-width: 200px;
    white-space: nowrap;
    background: #8E44AD;
    color: white;
    width: 50%;
}

.panel-right {
    flex: 1 0 auto;
    padding: 10px;
    min-height: 100vh;
    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>

<div class="panel-container el" style="height:100%;">
    <div class="panel-left resizable">
        left panel
    </div>

    <div class="splitter">
    </div>

    <div class="panel-right" id="panelRight">
        right panel
    </div>
</div>