CODEWITHSUNDEEP
htmlcssflexbox
MyNewName
MyNewName

Reputation: 1055

Wrap Text inside flex item

I have two div containers. The first container got a fixed with of 300px. The second div should fill the outer div. To solve this problem, I used flexboxes. My problem is now, that the second div don't wrap the content. How can I fix this problem?

Here is a JSfiddle

*{
  margin: 0px;
  padding: 0px;
}

.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

.left{
  width: 200px;
  float: left;
  background-color: red;
  height: 20px;
  margin-right: 10px;
}

.right{
  flex-grow: 1;
  float: right;
  background-color: green;
  height: 20px;
}

.clearBoth{
  clear: both;
}
<div class="content">
  <div class="left">
    
  </div>
  <div class="right">
    Here is Some Text
  </div>
  <div class="clearBoth"></div>
</div>

Upvotes: 9

Views: 15907

Answers (3)

Nevitones
Nevitones

Reputation: 327

Here it is one option that worked just fine for me.

Using flex: 0 0 auto; for the left item and flex: 1 1 min-content; for the right item, makes the left item only take the space it needs, while the right item will adapt to fill the remaining space allowing its text content to wrap before wrapping the flex item.

min-content sets the minimum width for its content ensuring the text can wrap, if necessary, without the right item being constrained to a fixed width.

** This approach allowed me to use align-content, that depends on flex-wrap being enabled, without it making the flex item wrap before the text.

** Only tested on Chrome

.content {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.content.works div {
  background-color: lightgreen;
}

.works .left {
  flex: 0 0 auto; /* First item takes only the space it needs */
}
.works .right {
  flex: 1 1 min-content; /* Second item takes remaining space with text wrapping */
}

.content.issue {
  background-color: lightcoral;
}
<div class="content works">
  <div class="left">Left</div>
  <div class="right">THIS WORKS GREAT - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<hr>
<div class="content issue">
  <div class="left">Left</div>
  <div class="right">THIS WRAPS FLEX ITEMS BEFORE TEXT - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

First you can't use float inside flex container and the reason is that float property does not apply to flex-level boxes.

You should also remove height from .right item and use flex: 1 instead.

* {
  margin: 0px;
  padding: 0px;
}
.content {
  display: flex;
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}
.left {
  width: 200px;
  background-color: red;
  height: 10px;
  margin-right: 10px;
}
.right {
  flex: 1;
  background-color: blue;
  color: white;
}
<div class="content">
  <div class="left"></div>
  <div class="right">Here is Some Text</div>
</div>

Upvotes: 7

Paulie_D
Paulie_D

Reputation: 114991

float does not affect flex-items...I think this is what you are after.

*{
  margin: 0px;
  padding: 0px;
}

.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

.left{
  flex: 0 0 200px;
  background-color: red;
  margin-right: 10px;
}

.right{
  flex: 1;
  background-color: green;
}

.clearBoth{
  clear: both;
}
<div class="content">
  <div class="left">
    
  </div>
  <div class="right">
    Here is Some Text
  </div>
  <div class="clearBoth"></div>
</div>

Upvotes: 3

Related Questions