How to fit flex item's width to content image in flexbox?

user_13192834 0
Viewed 269

There is a <div> with display: flex;, flex-direction: column and fixed height and width. There are flex items containing images. After applying min-height: 0, as required, the images distributed vertically equal. But the flex items have some extra space left out. I can't remove this.

I tried all kind of stuff but no luck. please help.

.a {
  border: 1px red solid;
  width: 200px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.a>div {
  border: 1px blue solid;
  min-height: 0;
}

.a>div>img {
  height: 100%;
}
<div class="a">
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
</div>

flexbox css html
2 Answers

Just add height: calc(100% / 3) to .a > div.

Edit: Works on Firefox also.

.a {
  border: 1px red solid;
  width: 200px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.a > div {
  border: 1px blue solid;
  min-height: 0;
  height: calc(100% / 3); /* 3 is flex items in flex container */
  box-sizing:border-box;
}

.a > div > img {
  height: 100%;
}
<div class="a">
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
</div>

user_106987410

Fiddling with your post, And I don't know why but adding height:100% to your flex items worked.

So yeah solution is to add height:100% in the flex items.

.a {
  border: 1px red solid;
  width: 200px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  flex-grow:0;
}

.a>div {
  border: 1px blue solid;
  min-height: 0;
  height:100%;
}

.a>div>img {
height:100%
}
<div class="a">
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
</div>

user_115635610
Related