Adding 'overflow:hidden' to a element is changing the position of elements of surrounding it

HTML-CSS
1 
 <td class="data-label">                
    <span class="data" data-full-url="<%= dataObj.objSteamIds.steam64 %>">
       <%= dataObj.objSteamIds.steam64 %>
    </span>
  <span class="steamid64-copy copy" data-toggle="tooltip" data-placement="right" dataoriginaltitle="Copy To Clipboard">
      <i class="far fa-clone"></i>
  </span>
</td>

Above is the HTML code related to the question.As we can see there are two span’s inside a ‘td’.The second span has a class of ‘copy’,along with other classes which is irrelavent here.Below I will attach the css styles for class ‘copy’.

.copy{
  display: inline-block;
  overflow: hidden
  position: relative;
  color:rgb(88, 88, 88);
  margin-left: 1rem;
  padding: .5rem .7rem;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

I have defined ‘overflow’ as ‘hidden’ and display as ‘inline-block’.
The ‘overflow’ ‘hidden’ property is making the first first ‘span’ with class of ‘data’ to go down.
I am fairly new to programming and I am having a rough time dealing with this. I do not know why adding overflow hidden is making the sibling span to move down.
I will attach a video clip below for better understanding.

Please watch the video.I have uploaded it to cloudinary.As we can see in the video when overflow hidden is enabled.The sibling span goes down.
Any help regarding this is appriciated.Thank You.

2

Hi @sai25 ! I’m not sure why this woul be so - but let’s think together, maybe we will find the solution :slight_smile:

Ok, I’ve read this article at w3school:
https://www.w3schools.com/cssref/pr_pos_overflow.asp

It says:

  1. The overflow property specifies what should happen if content overflows an element’s box.

So check the width - is there any chance the elemets are not comfortable together (I think not, but I guess it might be worth considering).

  1. Note: The overflow property only works for block elements with a specified height.

I can see that the .copy class has no height or width specified. Does the behaviour change once you add some of that?

3

It does change the behaviour if i add height to ‘.copy’ but it cuts off the elements visibility in half let me be more clear i will attach a screenshot.

freecodecamp
freecodecamp1163×408 55.9 KB

As we can see in the image.If u observe the value corresponding to the label “steamid3” the icon is slightly cut.Because i defined a height of 20px(which can be seen in the element.style in the developer tools).
But I came up with a alternative I defined display as flex to the parent “td” and align items to center which fixed it.But I wonder why overflow hidden makes the surrounding elements go down.But I really appriciate you taking time and looking at my question and suggesting a answer.I am really thankfull.

4

I see :0
To look a bit deeper, here is the documentation: DevDocs

It say something about " block formatting context":

Specifying a value other than visible (the default) creates a new block formatting context. This is necessary for technical reasons — if a float intersected with the scrolling element it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.

Maybe this is the key. I’m not sure what this context is, but maybe it adds some margin or something.

5

Ya might be.Its just wierd

6

Actually when I add any property that specifies in docs as “adding new formatting context” it goes down :grimacing:
And with the default value (i.e. without the formatting context) it stays up.

So probably that’s it.

But generally yeah, CSS is weird without a question. I guess there will be a lot of moments like this.