What happened?

Description

Fields with 25% width get width: 50%, together with 50% fields – even with more than enough space available. I'm guessing there's something wrong with css specificity. This part in the CP CSS seems to be responsible:

#content :not(.meta) > .flex-fields,
#content > .flex-fields,
.draghelper.drag-in-content .flex-fields {
  & > :not(h2, hr, .line-break) {
    &,
    &:last-child {
      // 4 cols for >= 1536px
      @media only screen and (min-width: $minXlUiWidth) {
        &.width-25 {
          width: 25%;
        }

        &.width-50 {
          width: 50%;
        }

        &.width-75 {
          width: 75%;
        }
      }

      // 2 cols when container is > 720px
      @container (min-width: 45em) {
        &.width-25,
        &.width-50 {
          width: 50%;
        }
      }
    }
  }
}

Steps to reproduce

1. Create a 75% field and a 25% field inside an entry type.
2. See the 25% wrap into the second row as it gets width: 50%.

Expected behavior

Fields with 25% width should get width: 25% if space is available.

Actual behavior

Fields with 25% width get width: 50%.

Craft CMS version

5.5.2

PHP version

8.3

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions