Prevent flex items from stretching

[Mori]

Sample code:

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

DEMO

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?

[SamA74]

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

@Mori

Why does it basically happen to the span?

Why does what happen?

@Mori

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

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.

[Mori]

Thanks for the answer! Resolved.