В моем html есть два элемента, которые используют 'vw' для ширины. Элемент B скрыт до нажатия кнопки. Когда кнопка нажата и элемент B появляется на экране, элемент A сжимается. Почему это происходит? Разве vw не основан на ширине окна, поэтому он не должен изменяться, если не изменяется размер браузера?
Вот некоторый код и ссылка на JS скрипку, которую я сделал, чтобы показать это поведение. Если нажать кнопку, синяя боковая панель слева сжимается, когда появляется красная боковая панель справа. https://jsfiddle.net/MorganLeeR/3xL5pdsm/9/# & Togetherjs = rw3KtFwwlq
HTML
<body>
<div class="sidebarLeft">
</div>
<div class="main">
<button onclick="showSidebar()">click me</button>
</div>
<div class="sidebarRight" style="display:none;">
</div>
</body>
CSS
body{
display: flex;
height: 100vh;
width: 100vw;
}
.sidebarLeft{
background: blue;
height: 100vh;
width: 25vw;
}
.main{
width: 100%;
}
.sidebarRight{
background: red;
height: 100vh;
width: 25vw;
}
JS
let showSidebar = function(){
let sidebar = document.querySelector(".sidebarRight");
if(sidebar.style.display === "none"){
sidebar.style.display = "flex";
}else{
sidebar.style.display = "none";
}
}
Может кто-нибудь объяснить мне это, потому что я не понимаю этого поведения. Кроме того, решение этого было бы очень хорошо. Спасибо.