Here's a sample: https://jsfiddle.net/gxhb2xnu/1
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.column {
flex: 1;
background: red;
margin: 0 4px;
height: 100%;
}
<div class="container">
<div class="column">foõ foõ foõ foõ foõ foõ</div>
<div class="column">foõ</div>
<div class="column">foõ</div>
<div class="column">foõ</div>
<div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div>
</div>
As you can see the last column adjusts its width to accomodate the text. I'd like every column to have an equal width and to just break mid-word onto the next line.
I tried flex-basis: 0
and word-wrap: break-word;
, but it doesn't seem to affect it.
There were few mistakes that I have corrected.
column divs
.word-break:break- word
Below is the working code.
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.column {
flex-grow: 1;
flex-basis: 0;
background: red;
margin: 0 4px;
height: 100%;
word-break: break-word;
}
<div class="container">
<div class="column">foõ foõ foõ foõ foõ foõ</div>
<div class="column">foõ</div>
<div class="column">foõ</div>
<div class="column">foõ</div>
<div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments