Flexbox item specified widths not being used

Tell us what’s happening:
I’d like my flex items to be exactly 50% of the width of the container. So there should be two items per row, each exactly 50% of the width of the length of the row, before the flex-wrap property pushes the next item to the next row. Problem is, when I set the items’ width to be 50%, they end up not being 50% of the width. They end up being a bit larger, pushing the items to the next row prematurely.

Any ideas as to why this might be happening?

Below is the styling in question, and here is a link https://codepen.io/phillthephill/pen/QWGEjeK to a forked version of what I’ve got in total. The images I use aren’t available, obviously, but the flexbox itself is behaving the same regardless.

Your code so far

   .cardContainer{
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: auto;
  border-width: 1px;
  border-style: solid;
  border-color: #707070;
}

.cardContainer > img {
  width: 50%;
  height: auto;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

Hi, the border size and the solid border thingy cause this. either you need to remove the border width and style or you can give that img element the width of %49.4.

1 Like

I wouldn’t recommend calculating weird width values (plus, those values could vary if you have a responsively resizing image), but to try box-sizing:border-box instead.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Thanks so much, that did the trick! I knew it was something simple, for some reason just couldn’t find it when looking through the docs.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.