.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>
Ideally , I want each msg
to have max-width of 30vw
, but at the same time respect parent's width. The first row behaves correctly, but the second row doesn't. If parent's width is resized to some value smaller than 30vw, the second msg will overflow.
I want something like max-width = min(30vw, parent's width)
NOTE: Container's width can be dynamically resized. I put width = 300px in the example to demonstrate a case where container cannot hold the second msg which somehow has width = it's max-width = 30vw.
You can also see the example at http://jsfiddle.net/vbj10x4k/231/
To configure the word wrapping settings, right-click an image, select “Wrap Text”, then select a wrapping option. The word wrapping options are: “In Line with Text”, “Square”, “Tight”, “Through”, “Top and Bottom”, “Behind Text”, and “In Front of Text”.
The two properties ( word-break and word-wrap ) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn't overflow their ...
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Simply set max-width:100%
to .parent
so this one respect the width of .container
then rely on flex and your element will shrink by default. Also don't forget min-width:0
on the element itself to enable the element to shrink.
.container {
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;
max-width:100%; /*Added this */
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width:30vw;
min-width:0; /*addedd this*/
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>
If you do not need to support IE11 or safari, a simple solution would be to switch your word-wrap:break-word;
with
word-wrap: anywhere
(working example)
If you need to support safari (but still not IE11), then instead replace word-wrap:break-word;
with word-break: break-word
. Note that word-break: break-word
is deprecated in favour of word-wrap: anywhere
.
I would also recommend switching word-wrap
for its more commonly used alias: overflow-wrap
. It will be more effective when used in a search term.
Also see: Difference between overflow-wrap and word-break?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With