内容不会扩展为设置了最小宽度和最大宽度的 div - 宽度始终停留在最小值

Question

i有一个菜单容器，其中包含具有各种长度字符串的<a>标签。

当我将菜单容器提供以下CSS时，我的菜单总是静态设置为最小宽度（在这种情况下为200px）。我希望更长的字符串推出直到最大宽度。如果我不设置最小宽度，则由于50px的nav-bar s宽度，容器会变得很小。navbar在另一个带有单独的CSS文件的React文件中。如何将菜单从nav的宽度控制？

中。

*内容仅扩展超过其设置的最小宽度，如果<a>包含一个没有空格/单词breaks的字符串。

这是一个codepen，其行为示例：https：//codepen.io/vee1234/pen/omqxwp

CSS

  .nav-bar {
     width: 50px;
    }
    .hover-menu {
      display: inline-block
      min-width: 200px;
      max-width: 400px;
      width: 100%
      position: relative;
      left: 40px;
    }
    .link a {
      line-height: 35px;
      color: #d8d8d8;
      width: 100%;
      height: auto;
    }

react

 <Nav className={navbar}>   
   <Menu>
    <div className={hover-menu}>
      <div className={links}>
        <a>some text</a>
        <a>some longer text that never expands past 200px</a>
      </div>
      </Menu>
    </Nav>
 </div>

Answer 1

尝试以下：

.menu {
  display: inline-block;
  min-width: 200px;
  max-width: 400px;
}
.link a {
  display: block;
  line-height: 35px;
  color: #d8d8d8;
  height: auto;
  word-wrap: break-word;
}

我认为您遇到的问题是您的所有链接都在排队。我希望我是正确的，假设您的意思是要它们堆叠...如果是这样，则将a标签显示块，同时为菜单容器提供最小的内联块显示屏，并按照所述呈现菜单。

Answer 2

实际上，您可以通过使用位置来防止hover-menu符合父母的宽度约束。在这种情况下，menu标签将具有

position:relative;

和类hover-menu将具有

position:absolute;
left:0;

，您也可以在hover-menu上指定其他CSS规则。