Как изменить размер двух флексных ящиков в анимации? ⇐ Html

[Anonymous]

Я пытаюсь сделать приложение по чату, и на нажатии кнопки вы можете увидеть временные метки сообщений. остальное. Давайте позвоним в Div1 для TimeStamp (200px) и Div2 для сообщений (занимает оставшуюся часть пространства). < /P>
Я попытался использовать перевод на первом 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;
});

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

Код: Выделить всё

*{
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;
});

Как 100% родительского за исключением размера Div1 не остальное? Я так запутался.
, пожалуйста, скажите мне, какой метод я должен использовать и почему 100% - 200px не выстроится.

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