0

When the content of a flex item is an inline element, the flex item is stretches differently then when the content is a block size like it should be.

Here's a minimal reproduction

.parent {
  display: flex;
  width: 300px;
  height: 50px;
  border: 1px solid black;
  align-items: center;
}

.child {
  border: 1px solid red;
}

.image {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    <img class="image" />
  </div>
</div>

This gives me the following result (no stretch a accross the cross axis)

First result

If I change the css of the image for it to be treated as a block

.image {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  display: block;
}

In this case, the child takes the height of its content

enter image description here

First of all, shouldn't the child stretch accross the whole cross axis for flex items ? In this example it doesn't seem to be the case.

Second of all, why is the height of the child different based on the image being inline or block ?

Thanks.

EDIT 1:

Here's the link to the fiddle if needed https://jsfiddle.net/64vxkuqt/28/

TanguyB
  • 1,954
  • 3
  • 21
  • 40
  • I don't think this has much to do with flex in particular, but this is just the effect of space for text underlengths being reserved when the image is inline. Make the parent `block` instead of flex, and you will see the same effect happening (only without the vertical alignment of the red box in the middle, it will be at the top.) – CBroe Nov 02 '22 at 08:21

0 Answers0