在Bootstrap4中扩展搜索栏的CSS转换

我在Bootstrap4导航栏中有一个扩展悬停搜索表单。悬停时搜索表单上有一个平滑的过渡，但它旁边的菜单突然跳转。我以前用带浮动元素的Bootstrap3做过这种布局，所有的东西都可以平滑地滑动。它与flexbox的行为不同。我仍在学习flexbox——在不使用浮动的情况下，生产线中的所有东西都能顺利滑动吗

---

这里有一个完整的工作示例。您需要在正常状态和焦点上设置输入的宽度。平滑效果也需要过渡

#搜索{width:75px；transition:width.5s ease}
#搜索：焦点{宽度：200px}

乱数假文
搜寻

谢谢。问题似乎是我使用了最大宽度的百分比。我所做的全部更改是100%改为200px，它平稳地过渡到了整个生产线。

#secondaryNav {
  justify-content:flex-end;
  transition:all 0.5s;
}

#secondaryNav #searchform {

  .input-group {
    justify-content:flex-end;
  }

  .search-form-control {
     transition: all 0.5s;
     max-width: 0;
     overflow: hidden;
  }    

}

#secondaryNav #searchform:hover {

    .form-control {
        max-width:100%;
    }

}