Wie kann ich zwei Flexboxen in einer Animation ändern? ⇐ CSS

[Guest]

Ich versuche, eine Chat -App zu erstellen, und beim Drücken einer Taste sehen Sie Zeitstempel von Nachrichten. Der Rest. Rufen wir Div1 für den Zeitstempel (200px) und Div2 für die Nachrichten an (nimmt den Rest des Raums auf). < /P>
Ich habe versucht Dass der Div2 nicht automatisch verändert wird: < /p>

Code: Select all

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

Also habe ich versucht, die Größe der Div2 -Größe zu ändern, aber als ich dann berechnet habe (100% - 200px) war es nicht die gleiche Größe !! < Br />

Code: Select all

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

Wie kann 100% des übergeordneten Elternteils minus der Größe des Div1 nicht der Rest ist? Ich bin so verwirrt.>