CODEWITHSUNDEEP
htmlcssflexbox
Brigand
Brigand

Reputation: 86230

Text isn't wrapping in flexbox grid in chrome

CodePen: http://codepen.io/anon/pen/dYKGwV?editors=110

I have this html:

<div class="Box Box--row" style="width: 20em; border: 1px solid black">
   <div class="Box Box--column">Avatar</div>
   <div class="Box Box--column">
     <div class="Box Box--row">
       <div class="Box">Name</div>
       <div class="Box">6:30pm</div>
     </div>
     <div style="max-width: 100%; width: 100%;">
        This is some text. This is some text. This is some text. This is some text. This is some text.
     </div>
   </div>
</div>

And CSS:

.Box {
  box-sizing: border-box;
  position: relative;
  border: 0 solid black;
  margin: 0;
  padding: 0;

  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
  display: flex;

  &--row { flex-direction: row; }
  &--column { flex-direction: column; }
}

But it renders like this:

enter image description here

It kinda works in firefox. How do I get the text to wrap?

Upvotes: 1

Views: 778

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

option #1: adjust width property

You're giving the text div a 100% width:

<div style="max-width: 100%; width: 100%;">
This is some text. This is some text. This is some text. 
This is some text. This is some text.
</div>

Demo: http://jsfiddle.net/db2udqhp/

You can limit the width and the text will wrap:

<div style="width: 50%;">
This is some text. This is some text. This is some text. 
This is some text. This is some text.
</div>

Demo: http://jsfiddle.net/db2udqhp/1/

option #2: use flex property

Apply flex: 1 to the flex item containing the div with text. This makes the flex item flexible and forces it to use the free space in the container.

div.Box.Box--row[style] > div.Box.Box--column:last-child { flex: 1; }

Demo: http://jsfiddle.net/db2udqhp/4/
Modified Codepen: http://codepen.io/anon/pen/GpGZaK?editors=110

Upvotes: 1

Maximilian K&#246;hler
Maximilian K&#246;hler

Reputation: 420

Why are you setting flex-shrink to 0? When i set it to 1 it works fine.

Upvotes: 2

Related Questions