Flex squashing circle with icon in when making window smaller - how can I stop this happening?

Hi,

I am trying to create an icon in a circle with some text to the left of it.

This is what I have:

I am using flex to create the elements next to each other which kind of works, but when the text to the right is quite long, it squashes the circle into an oval, even though I have defined a width and height.

How I can stop this from happening?

This is what I am trying to achieve:

image

Hi,
On your .item-circle rules I think you will be fine by simply changing width to min-width

.item-circle {
  min-width: 35px; /*was width*/
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: 2px solid #9a9fbf;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
1 Like

While the min-width option I showed above does keep the circle from shrinking, you should read up on the flex property to understand what was going on. Flex items flex unless they are told not to.

You did not have the flex property set so it was defaulting to it’s initial value which is equivalent to setting flex: 0 1 auto; /* Three values: flex-grow | flex-shrink | flex-basis */

In which case it was shrinking to fit it’s content, the fa map marker.

You can also use the flex shorthand rather than min-width to tell it not to shrink, not to grow, and stay at it’s basis of 35px.

.item-circle {
  flex:0 0 35px;/*don't grow, don't shrink, stay at basis*/
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: 2px solid #9a9fbf;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
3 Likes

Thank you @Ray.H, that made sense and has fixed the issue. I am still getting used to using flex, so it’s good to know the explanation :slight_smile:

Thanks again

2 Likes

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