内容不会扩展到设置了 min-width 和 max-width 的 div - 宽度始终停留在 min答案

【问题标题】：Content won't expand into a div with a min-width and max-width set - width always stuck at min内容不会扩展到设置了 min-width 和 max-width 的 div - 宽度始终停留在 min
【发布时间】：2019-02-14 04:43:38
【问题描述】：

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

当我为菜单容器提供以下 CSS 时，我的菜单总是静态设置为最小宽度（在本例中为 200px）。我想要更长的字符串推出直到最大宽度。如果我不设置最小宽度，则容器会因为nav-bars 宽度为50px 而变得非常小。 navbar 位于另一个带有单独 CSS 文件的 React 文件中。如何使菜单不受导航宽度的控制？

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

这是一个带有行为示例的代码笔：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;
    }

反应

 <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>

【问题讨论】：

我刚刚在 codepen 中尝试了这个，它就像你说的那样......你的链接 css 是什么？
发生同样的事情，在我的环境之外按预期工作。将添加完整的 CSS。

标签： css styling

【解决方案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;
}

我认为您遇到的问题是您的所有链接都排成一行。我希望我的假设是正确的.

【讨论】：

同样的问题 :(，使用准确的 CSS - 容器始终设置为 200px
啊我刚刚发现，另一个文件中的父元素的宽度设置为50px...不知道为什么它会影响这个菜单。
如果我将父级扩展为大于最小宽度，则菜单会扩展。让menu 忽略其他文件 css 的最佳方法是什么？
你可以给 menu 另一个类，然后用 !important 指定你的新宽度，你只需要在你想改变 menu 宽度的地方使用这个规则
我不确定我是否理解@CliffRono - 我希望菜单至少为 200 像素，但灵活的宽度可以扩展到 400 像素。你是说给min-width 和max-widths 一个!important 标志？

【解决方案2】：

其实可以通过位置来防止hover-menu符合父级的宽度约束。在这种情况下，menu 标记将具有

position:relative;

hover-menu 的班级将拥有

position:absolute;
left:0;

你也可以在hover-menu上指定你的其他css规则。

【讨论】：

这里是一个问题的例子：codepen.io/vee1234/pen/omQxWP