как изменить размер элемента <p>при падении

Question

У меня есть код, в котором есть 8 полей с именем класса .у каждого есть p элемент в нем, который можно перетащить в boxright в правой части.

Есть ли способ, которым я могу содержать все 8 отброшенных p элементы в прямоугольнике.

т.е. is there a way i can reduce the size of p ondrop so that 8 elements can fit inside the boxright?

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.box {
  width: calc(23.3% - 6px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #73c6b6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.boxright {
  position: absolute;
  top: 27.3vh;
  left: 50.98vw;
  width: 3.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.boxright p {
  font-size: calc(2vw + 10px);
}

.boxleft p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
  color: #005ce6;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">

      <div id="container">
        <div class="box" id="box1">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
        </div>
        <div class="box" id="box2">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
        </div>
        <div class="box" id="box3">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
        </div>
        <div class="box" id="box4">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
        </div>
      </div>


      <div id="2container">
        <div class="box" id="box5">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
        </div>
        <div class="box" id="box6">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
        </div>
        <div class="box" id="box7">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
        </div>
        <div class="box" id="box8">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
        </div>
      </div>


    </div>
  </div>



  <div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>

Answer 1

Удалите поле из p и установите его высоту 5vh в вашем .boxright p

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.box {
  width: calc(23.3% - 6px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #73c6b6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.boxright {
  position: absolute;
  top: 27.3vh;
  left: 50.98vw;
  width: 3.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.boxright p {
  font-size: calc(2vw);
  height: 5vh;
  background: royalblue;
  margin: 0;
  color: white;
}

.boxleft p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
  color: #005ce6;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">

      <div id="container">
        <div class="box" id="box1">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
        </div>
        <div class="box" id="box2">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
        </div>
        <div class="box" id="box3">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
        </div>
        <div class="box" id="box4">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
        </div>
      </div>


      <div id="2container">
        <div class="box" id="box5">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
        </div>
        <div class="box" id="box6">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
        </div>
        <div class="box" id="box7">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
        </div>
        <div class="box" id="box8">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
        </div>
      </div>


    </div>
  </div>



  <div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>