Как изменить размер Flexbox в анимации? ⇐ Html

[Anonymous]

Хорошо, я пытаюсь сделать приложение в чате, и при нажатии кнопки вы можете увидеть временные метки сообщения. Другое берет все остальное. 200px < /p>
div2
Я попытался использовать перевод на первом Div1 и перемещать и быстро его реализовать, что Div2 не будет изменяться автоматически: < /p>






*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.chat-container {
display: flex;
height: 50vh;
width: 50vw;
background-color: #f0f0f0;
}
#div1 {
background-color: #0004ff;
height: 100%;
width: 200px;
text-align: center;

position: relative;
left:-200px;
transition: left 1s;
}
#div2 {
background-color: #ff0000;
height: 100%;
text-align: center;
width: calc(100% - 200px); /* 100% - 200px or auto would work*/
}





div1

div2


animation

let actived = false;
document.getElementById("button").addEventListener("click", function() {
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
div1.style.left = actived ? "-200px" : "0px";
actived = !actived;
});



< /code>
Поэтому я попытался изменить размер размера Div2, но когда тогда я сделал Calc (100% - 200px), но это был не тот же размер !! < /p>






*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.chat-container {
display: flex;
height: 50vh;
width: 50vw;
background-color: #f0f0f0;
overflow: hidden;
}
#div1 {
background-color: #0004ff;
height: 100%;
width: 200px;
text-align: center;

position: relative;
left:-200px;
transition: left 1s;
}
#div2 {
background-color: #ff0000;
height: 100%;
text-align: center;
width: calc(100% - 200px); /* 100% - 200px or auto would work*/

position: relative;
transition: width 1s;
}





div1

div2


animation

let actived = false;
document.getElementById("button").addEventListener("click", function() {
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
div1.style.left = actived ? "-200px" : "0px";
div2.style.width = actived ? "100%" : "calc(100% - 200px)";
actived = !actived;
});



< /code>
Как 100% от родителя минус размер div1 не остальное, я так запутался. < /p>
Скажите, пожалуйста, какой метод я должен использовать и почему 100% - 200 пикселей не выстроится в линию.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -animation