.container {
/*
Container's width can be dynamically resized.
I put width = 300px in the example to demonstrate a case
where container's width couldn't hold second msg
*/
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1em;
background-color: blue;
}
.parent{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
padding:1em;
background-color:red;
box-sizing:border-box;
margin-bottom: 1em;
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width: 30vw;
padding:.5em;
word-wrap:break-word;
}<div class='container'>
<div class="parent">
<div class="name">
David
</div>
<div class="msg">
How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you?
</div>
</div>
<div class="parent">
<div class="name">
Hannah
</div>
<div class="msg">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
</div>理想情况下，我希望每个msg人的最大宽度为30vw，但同时尊重父母的宽度。第一行行为正确，但第二行没有。如果 parent 的宽度调整为小于 30vw 的某个值，则第二个msg 将溢出。
我想要类似的东西max-width = min(30vw, parent's width)
注意：容器的宽度可以动态调整大小。我在示例中放置了 width = 300px 以演示容器无法容纳第二个 msg 的情况，该 msg 以某种方式具有 width = 它的 max-width = 30vw。