调整模式和内容的大小

Question

我使用Less（css）在JavaScript和样式中有一个模态，当我通过拖动使屏幕变小时会发生这种情况，如何使文本框和按钮缩小？

这是Modal的Less代码：

 /* Modal Content/Box */
 .modal-content {
 background-color: @backgroundcolor;
 margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 3px solid @Black;
width: 25%; /* Could be more or less, depending on screen size */
}

这是文本框和按钮：

.forgot-password-textbox {
font-size: @textbox-font-size;
border-radius: @textbox-border-radius;
border: @border-lines solid @Black;
padding: @padding-40 / 4;
width: @textbox-width + 250;
height: @textbox-width/10;
box-shadow: 0 1px @Grey;
 }


.forgot-password-button {
margin-left: @forgot-password-textbox-button-margin-left;
margin-top: auto; 
width: @width-200px;
height: 45px;
 }