В моем интерфейсе имеется два блока, у них задано минимальные размеры, максимальные размеры и действующий размер, всё указано в vw и vh. При растягивании окна справа от 2 блока появляется пропуск, а при сжимании блок уменьшается, но когда мы уменьшаем окно до определённых размеров 2 блок смещается под 1 (минимальные размеры 2 блока явно не были достигнуты). Ниже прикрепляю код в html и css свойства блоков. html:
<!DOCTYPE html>
<html>
<head>
<title>UNBEBinder</title>
<script src="/eel.js"></script>
<link rel="icon" type="image/png" href="/unbe.png">
<link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript">
function createButtonsInScroll(quantityBtns, whereToInsertNode) {
for (let i = 0; i <= quantityBtns; i++) {
const buttonNode = document.createElement('button');
buttonNode.id = `selectbutton${i}`;
buttonNode.textContent = `Отыгровка ${i}`;
whereToInsertNode.append(buttonNode);
const brNode = document.createElement('br');
whereToInsertNode.append(brNode);
}
}
</script>
<div id="buttonsInScroll">
<script type="text/javascript">
createButtonsInScroll(30, buttonsInScroll);
</script>
</div>
<div class="editorMain">
<button id="buttonCopy">Копировать</button>
</div>
<div class="mainBlock"></div>
</body>
</html>
css:
@import url(http://fonts.cdnfonts.com/css/lemon-milk)
* {
font-family: "LEMON MILK", sans-serif;
}
#buttonsInScroll {
overflow-y: auto;
width: 118px;
min-height: 154px;
max-height: 97.5vh;
float: left;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #3d3837;
border-radius: 5em;
}
::-webkit-scrollbar-thumb {
background-color: #201e1e;
border-radius: 5em;
padding: 10px;
}
::-webkit-scrollbar-thumb:hover {
padding: 0px;
}
html, body {
overflow-y: hidden;
background: #262626;
color: white;
scrollbar-color: #201e1e #3d3837;
scrollbar-width: 10px;
}
#selectbutton0 {
border: none;
width: 10.3%;
height: 3.9%;
min-width: 100px;
min-height: 30px;
background-color: #fd6a12;
border-radius: 7px;
color: white;
cursor: pointer;
}
#selectbutton1, #selectbutton2, #selectbutton3, #selectbutton4, #selectbutton5, #selectbutton6, #selectbutton7, #selectbutton8, #selectbutton9, #selectbutton10, #selectbutton11, #selectbutton12, #selectbutton13, #selectbutton14, #selectbutton15, #selectbutton16, #selectbutton17, #selectbutton18, #selectbutton19, #selectbutton20, #selectbutton21, #selectbutton22, #selectbutton23, #selectbutton24, #selectbutton25, #selectbutton26, #selectbutton27, #selectbutton28, #selectbutton29, #selectbutton30 {
border: none;
margin-top: 7px;
min-width: 100px;
min-height: 30px;
background-color: #fd6a12;
border-radius: 7px;
color: white;
cursor: pointer;
}
.editorMain {
background-color: #3d373a;
margin-left: 17px;
width: 87vw;
height: 97.5vh;
max-width: 87vw;
max-height: 97.5vh;
min-width: 535px;
min-height: 154px;
border-radius: 25px;
float: left;
}
#buttonCopy {
border: none;
margin-top: 7px;
margin-left: 19px;
min-width: 100px;
min-height: 41px;
background-color: #262626;
border-radius: 20px;
color: #fd6a12;
cursor: pointer;
}
.mainBlock {
clear: float;
}
Есть ли возможность как-то решить проблему со смещением блоков и возможно ли как-то убрать пропуск правее 2 блока при растяжении окна. Заранее спасибо!