How come the last word in CSS nested flexbox wraps even though there is space available?

Question

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet:

<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;
}

To view the result, visit https://codepen.io/crupest/pen/Lqwxpp.

The issue I'm experiencing is that the last word "text" wraps even when there is remaining space on the right. How can I prevent it from wrapping or is there any workaround?

Any help is appreciated!

Update:

My intention is to have a color label in front of the text.

A big thanks to @Kata Csortos for pointing out the importance of mentioning my purpose.

html css flexbox

Answer 1

Answer №1

Check out this JsFiddle example

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

Have you considered trying the code snippet above? Simply replace flex: 0 0 15px with flex: 0 0 0, and then add padding-left:15px;

Answer 2

Check out this JsFiddle example

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

Have you considered trying the code snippet above? Simply replace flex: 0 0 15px with flex: 0 0 0, and then add padding-left:15px;

Answer 3

Answer №2

implement whitespace: nowrap; to keep text on one line

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

Answer 4

implement whitespace: nowrap; to keep text on one line

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

Answer 5

Answer №3

What are your objectives for this project and how do you envision its appearance? If you enclose the span within another div with a flex display and add padding, the text may not wrap as expected.

Here is an example of HTML structure:

<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>

Corresponding CSS styles:

.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;
}

You can also explore a more visually appealing version using the ::before pseudo-element here: https://jsfiddle.net/de6n1sr7/

Answer 6

What are your objectives for this project and how do you envision its appearance? If you enclose the span within another div with a flex display and add padding, the text may not wrap as expected.

Here is an example of HTML structure:

<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>

Corresponding CSS styles:

.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;
}

You can also explore a more visually appealing version using the ::before pseudo-element here: https://jsfiddle.net/de6n1sr7/

How come the last word in CSS nested flexbox wraps even though there is space available?

Update:

Answer №1

Answer №2

Answer №3

Similar questions

PHP is having trouble identifying the file extension for file uploads

Conceal elements of a rectangular shape using CSS

Issue with JAWS screen reader failing to announce aria-expanded status

Is there a way to modify or update the CSS classes and overall styling in .gsp files within the Grails framework?

Increase the size of a centered image within a table

What is the best way to eliminate the left margin entirely in CSS?

Steps for Adding an H1 Tag Using GWT

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Extract the content from the span element on Whatsapp Web

Achieving a layout of three columns and two rows (1 x 2 x 2) using flexbox

What is the best way to synchronize HTML5 audio playback on different browsers?

Tips for retrieving the current value of an input using AJAX

Adding an image within the body of text in a Django model, where both the text and image coexist

Switch out the rowspan attribute in HTML for a CSS alternative

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

Styling the file input type in AngularLearn how to customize the

The v-checkbox appears much larger in size and has a different row size when compared to the v-radio

Want to develop a web application and incorporate Ajax into it?

Is there a way to modify the CSS of the sequential number element when it is clicked on?

Using a dashed border stroke creates a unique look when combined with border-radius properties