Menu with specified number of items is one pixel off when attached to a segment

[lucapette]

Hi!

I think I ran into a bug. CSS is not my strongest suit so I apologise in advance in case this is intended behaviour.

Here is the code I'm using:

<div class="ui attached segment">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#x27;t look even slightly believable. If you are going to use a passage of Lorem
    Ipsum, you need to be sure there isn&#x27;t anything embarrassing hidden in the middle of text
</div>
<div class="ui bottom attached item two menu">
    <a class="active item">Section 1</a>
    <a class="item">Section 2</a>
</div>

As you can see in this jsfiddle, the menu is 1px off from the attached segment on the right side.

I ran into the bug using with the React Menu component with the widths prop. Not sure if that's relevant but I thought it was worth mentioning. I looked at existing issues here on github and I found #1557 and #1587 which seem related but my CSS knowledge is too limited for me to connect the dots. So sorry if that's misleading.

This code (which I added as a comment in the jsfiddle in case you want to give it a quick try):

.ui.attached.menu {
  max-width: calc(100% + 1px);
}

fixes the problem but I doubt it's an adequate solution. I wish I could open a PR with a fix but, once again, I don't have the knowledge to fix it on my own. And I'm still not 100% sure it's a bug. Maybe I'm doing something wrong.

Thank you very much for this awesome project!

[awgv]

Hi, this is a known issue: #4248.

[lucapette]

@Banandrew thank you for the info! Interesting that I didn't find it on my own!