CODEWITHSUNDEEP
css
veyogi8205
veyogi8205

Reputation: 11

Odd behaviour of width(auto) when words has auto break lines

Consider the following example:

https://jsfiddle.net/3w4fx8vu/

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
}
<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

The forth element (with 4 words) has an extra space from the right. The question is: why is this happens and what are the workarounds this?

Upvotes: 1

Views: 66

Answers (3)

DCR
DCR

Reputation: 15665

does this work for you? We added white-space:nowrap and overflow:hidden

It's not entirely clear what you want to happen when the text overflows the container;

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  white-space:nowrap;
  overflow:hidden;
}
<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;      
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  white-space:nowrap;
  overflow:hidden;
}
<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

Upvotes: 1

user7148391
user7148391

Reputation:

Why this happens ?

By default a flex item has 

flex-grow:0;
flex-shrink:1;
flex-basis:auto;

flex-grow:0; Means if there's left over space inside the container the elements won't grow.

flex-shrink:1; Means If there isn't enough space inside the container elements will shrink to fit inside

flex-basis:auto; Means flex item will have a minimum width/height equal to content.

With that setup, Elements content will be laid out First then if there's left over space it will be distributed evenly.

Now huge elements will take more space for themselves and still take their portion of the left over space that has been split evenly on all elements.

The existences of a huge element will force elements to shrink thanks to flex-shrink:1; and that is why you see one element have more space than the others.

What are the workarounds this?

flex-grow:1;
flex-shrink:0;
flex-basis:0;

flex-grow:1; Grow to fit makes elements share space equally.

flex-shrink:0; Never shrink

flex-basis:0; Split available space first, Then lay down the content. 

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  flex: 1 0 0;
}
<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

Upvotes: 0

Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

You didn't specify any width to the container , to make them take the same width you can add : flex: 1 1 ; : https://jsfiddle.net/9gf8a7rm/

html, body {margin:0; padding:0;}
.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}
.child {
  border: 1px solid #eee;
  flex: 1 1 ;
}

the width of the parent is limited , so you can't see the changes unless you remove : width:500px you can also replace it by max-width:fit-content to make it only take what it needs , see : https://jsfiddle.net/9gf8a7rm/1/

Upvotes: 0

Related Questions