Prevent flex items from stretching

Sample code:

div {
  display: flex;
  height: 200px;
  background: tan;
span {
  background: red;
  <span>This is some text.</span>


I have two questions, please:

  1. Why does it basically happen to the span?

  2. What is the right approach to prevent it from stretching without affecting other flex items in a flex container?

1 Like

I’m not sure I understand the question, but here goes…

Why does what happen?

I’m guessing that you are talking about the item alignment, which is making the span stretch to the full height of the div. The default value for align-items is stretch, so if you want something else, you must state your preferred setting on the flex object, Eg align-items:flex-start. But this will affect all flex children, to affect only one child, use align-self on that child.

1 Like

Thanks for the answer! Resolved.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.