JQuery UI Resiable- Как заставить изменить размер внутри родителя?

Question

На веб-странице есть три столбца, размер которых можно изменить.Мне нужно

1. Принудительно, чтобы ширина столбцов не превышала ширину родительского элемента
2. Они все вместе должны заполнять ширину родительского элемента
3. Тольковнутренние границы должны быть подвижными.

Так что, если ширина одного столбца становится больше, другой должен уменьшаться, и наоборот.

Для этого мне нужно попробовать jquery ui resiable и установите containment: "parent", но ни один из 3 пунктов не выполнен.Это код

    <style>
        .resizable {
            height: 300px;
            border: 1px solid red;
            float: left;
            min-width: 20%;
        }
    </style>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header text-right">{{ __('Messages') }}</div>
                    <div class="card-body ">
                        <div id="usersColumn" class="resizable">
                        </div>
                        <div id="messagesColumn" class="resizable"></div>
                        <div id="messageColumn" class="resizable"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $(".resizable").resizable({
                containment: "parent",
            });
        });
    </script>

Что мне делать?Спасибо

Answer 1

Вам необходимо:

Использовать опцию включения, чтобы указать родительский элемент DOM или селектор jQuery

Пользовательский интерфейс jquery - изменяемый размер

$(function() {
  $(".resizable").resizable({
    containment: ".card-body"
  });
});

.card-body {
  display: flex;
}

.resizable {
  height: 300px;
  border: 1px solid red;
  flex: 1 1 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header text-right">{{ __('Messages') }}</div>
        <div class="card-body ">
          <div id="usersColumn" class="resizable">
          </div>
          <div id="messagesColumn" class="resizable"></div>
          <div id="messageColumn" class="resizable"></div>
        </div>
      </div>
    </div>
  </div>
</div>