CSS nested flexbox why is last word wrap when there is space?

Question

I have a nested flex container. Here is the code:

<div class="parent-container">
  <div class="child-container">
    <span class="color-block"></span>
    <span>This is a long long long long long text.</span>
  </div>
</div>

.parent-container {
  display: flex;
  background: orange;
}

.child-container {
  display: flex;
  background: green;
}

.color-block {
  background: yellow;
  flex: 0 0 15px;
  align-self: stretch;
}

Look at the result at https://codepen.io/crupest/pen/Lqwxpp.

This is the least code that reproduces my problem. Of course there are other elements in parent container.

My question is that why the last word "text" wraps even when there is remaining space at right? And how to make it not wrap? Or is there any workaround?

Thanks!

Update:

My purpose is that I want a color label in front of the text.

Thanks for @Kata Csortos pointing out that I need to say my purpose.

because it's a *nested* container ... nesting flexbox may lead to some unwanted result .. here is a more strange result : https://jsfiddle.net/14qp9nuz/. There is a complex cycle calculation where we don't get back to rectify — Temani Afif, Feb 23 '19 at 09:38
@Temani Afif Maybe! I searched for several hours only to find many strange problem about flexbox! — crupest, Feb 23 '19 at 09:53
@Karuppiah RK I don't want the child container stretch to parent! — crupest, Feb 23 '19 at 09:54
use width instead of flex-basis until flexbox become more stable ;) — Temani Afif, Feb 23 '19 at 09:58

score 2 · Accepted Answer · answered Feb 23 '19 at 09:58

2

JsFiddle

.color-block {
    background: yellow;
    flex: 0 0 0;
    align-self: stretch;
    padding-left: 15px;
}

Why don't you try like this above code? Remove flex: 0 0 15px to flex: 0 0 0 and then add padding-left:15px;

answered Feb 23 '19 at 09:58

Karuppiah RK

3,894
9
40
80

yours is correct – Santhosh Kumar Feb 23 '19 at 10:00
@crupest try and select it as correct answer if it works – Santhosh Kumar Feb 23 '19 at 10:00
Excellent solution! – crupest Feb 23 '19 at 10:00
@crupest no need padding, you can use a simple width like explained in the duplicate – Temani Afif Feb 23 '19 at 10:01
@Temani Afif Yes. You are right! – crupest Feb 23 '19 at 10:08

score 0 · Answer 2 · answered Feb 23 '19 at 09:37

0

use whitespace: nowrap; to unwrap in same line

.child-container {
    display: flex;
    background: green;
    white-space: nowrap;
}

answered Feb 23 '19 at 09:37

Santhosh Kumar

543
8
22

Now the text does not wrap but it overflow from the green background! It want the container to fit text in. – crupest Feb 23 '19 at 09:51
@crupest Did you check my comment? – Karuppiah RK Feb 23 '19 at 09:52
@Karuppiah RK Yes! But I was slow to reply to you! sorry! – crupest Feb 23 '19 at 09:55

Kata · Answer 3 · 2019-02-23T16:38:26.537

0

What you is your goal with this, how should it look like? If you put the span within another div with flex display and put padding on it for example, the text wont wrap.

HTML

<div class="parent-container">
  <div class="child-container">
    <div class="color-block">
      <span>This is a long long long long long text.</span>
    </div>
  </div>
</div>

CSS

.parent-container {
  display: flex;
  background: blue;
}

.child-container {
  display: flex;
  padding-left: 20px;
  background: green;
}

.color-block {
  background: yellow;
  padding: 5px 10px;
  align-self: stretch;
  display: flex;
}

Also made a nicer version using ::before pseudo element, check it out here: https://jsfiddle.net/de6n1sr7/

edited Feb 23 '19 at 16:38

answered Feb 23 '19 at 09:44

Kata

142
1
7

Sorry for not explaining! I just want a color block label in front of the text to indicate the state of the item like "it is done!". – crupest Feb 23 '19 at 09:49
Oh okay! I changed css a bit, now check it out. The child container only need a left padding, the 'status' will be indicated then. – Kata Feb 23 '19 at 09:54
Despite the strange question I mentioned, your solution is truly good! Really thanks for helping. – crupest Feb 23 '19 at 09:59
For what you want to do, I can strongly suggest using the ::before pseudo element, I find it more elegant than stacking divs. I added a fiddle showing this. – Kata Feb 23 '19 at 10:16
Yeah! I'm not quite familar with those pseudo element. It truly seems very elegant. I will learn them later! Thanks for coming up with this idea! – crupest Feb 23 '19 at 17:28

CSS nested flexbox why is last word wrap when there is space?

Update:

3 Answers3