Prevent Flex Items from Stretching

Prevent flex items from stretching

You don't want to stretch the span in height?

You have the possiblity to affect one or more flex-items to don't stretch the full height of the container.

To affect all flex-items of the container, choose this:

You have to set align-items: flex-start; to div and all flex-items of this container get the height of their content.

div {  align-items: flex-start;  background: tan;  display: flex;  height: 200px;}span {  background: red;}

<div>  <span>This is some text.</span></div>

CSS prevent div flex from stretching child

add another wrapper:

div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:center;
  height: 200px;
  width: 100px;
}

p span{
  background-color: green;
}

<div>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
  </p>
</div>

Prevent display: flex from stretching to full width of table cell

To be honest i am not sure what you want to do exactly but try to use inline-flex instead of flex

Image prevents flex item from stretching to bottom of screen

Use min-height: 100vh; on the container class, so it does not shrink when window height is smaller than the image height

html,body {  height: 100vh;  max-height:100%;}
body {  margin: 0;}
.container {  display: flex;  min-height: 100vh;}
.left {  background: lightblue;  flex: 2;}
.left img {  max-width: 650px;  width: 100%;}
.right {  background: lightcoral;  flex: 1;}

<div class="container">  <div class="left">    <img src="http://via.placeholder.com/400x400" />  </div>  <div class="right">    <p>Some content.</p>    <p>Some content.</p>    <p>Some content.</p>    <p>Some content.</p>    <p>Some content.</p>    <p>Some content.</p>    <p>Some content.</p>  </div></div>

Prevent Flex Items from Stretching