Why doesn't align-self: stretch work on a flex item?

Question

I have a question about css flex. My code:

.box {
  width: 300px;
  height: 300px;
  background: aqua;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: baseline;
  align-content: stretch;
}

.item {
  width: 50px;
  height: 50px;
  background: rgb(243, 62, 92);
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
}

.box .one {
  /* padding-top: 20px; */
  background: red;
  /* order: 1; */
  /* flex-shrink: 1; */
  align-self: stretch;
}

.box .two {
  background: coral;
  order: 2;
  flex-shrink: 1;
}

.box .three {
  background: forestgreen;
  order: 31;
  flex-shrink: 1;
}

.box .four {
  background: tomato;
  order: 4;
}

<div class="box">
  <div class="item one">项目1</div>
  <div class="item two">项目2</div>
  <div class="item three">项目3</div>
  <div class="item four">项目4</div>
</div>

I have a flex container with several flex items, and I want to stretch one of the items in the cross-axis direction using the align-self: stretch; property. However, the item does not seem to be stretched, and I'm not sure why this is happening. Can you help me understand why align-self: stretch; is not working in this case?

Thanks.

If I add `height: 100%` to `box-one` - only first item stretch, other stay in the same position, is that what you need? It not works without setting to 100%, because your item div got personal height. — TheNikCD, Apr 12 '23 at 13:19

Michael Benjamin · Accepted Answer · 2023-04-12T14:57:57.330

When you define a height on a flex item, that overrules the align-self property.

Remove the height: 50px on that item, and align-self: stretch will work.

Full explanation here: How does flex-wrap work with align-self, align-items and align-content?

.box {
  width: 300px;
  height: 300px;
  background: aqua;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: baseline;
  align-content: stretch;
}

.item {
  width: 50px;
  height: 50px;
  background: rgb(243, 62, 92);
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
}

.box .one {
  /* padding-top: 20px; */
  background: red;
  /* order: 1; */
  /* flex-shrink: 1; */
  align-self: stretch;
  height: auto; /* new */
}

.box .two {
  background: coral;
  order: 2;
  flex-shrink: 1;
}

.box .three {
  background: forestgreen;
  order: 31;
  flex-shrink: 1;
}

.box .four {
  background: tomato;
  order: 4;
}

<div class="box">
  <div class="item one">项目1</div>
  <div class="item two">项目2</div>
  <div class="item three">项目3</div>
  <div class="item four">项目4</div>
</div>

Why doesn't align-self: stretch work on a flex item?

1 Answers1