将具有百分比 (%) 宽度的 div 设置为其最大内容的最小宽度

Question

我正在尝试构建一个随页面宽度增长的侧边菜单，但是当缩小时不会折叠到菜单的任何内容中。

现在我可以使用min-width: 和一些静态像素数来防止菜单折叠，但是由于菜单的内容可以变化，我希望菜单始终具有最大元素的最小宽度。

这可以使用 javascript 来实现，但是有没有优雅的 CSS 解决方案呢？

这里是一个带有示例的笔，你可以滑动编辑器窗口折叠菜单：

CodePen

基本元素结构：

html, body {
  height: 100%;
}

.container {
  position: fixed;
  top:0;
  left:0;
  width: 30%;
  height:100%;
  background: rgba(255,0,0,0.4);
}

<div class="container">
  <ul>
    <li>Variable</li>
    <li>Width</li>
    <li>Content</li>
    <li>Do not collapse long text</li>
  </ul>
</div>

感谢大家的帮助

Answer 1

还有弹性盒

html,
body {
  height: 100%;
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  min-width:30vw;
  display: flex;
  height: 100%;
  background: rgba(255, 0, 0, 0.4);
}

<div class="container">
  <ul>
    <li>Variable</li>
    <li>Width</li>
    <li>Content</li>
    <li>Do not collapse long text</li>
  </ul>
</div>

Answer 2

您可以使用 CSS 网格来模拟这种行为

html, body {
  height: 100%;
  margin:0;
}

.container {
  position: fixed;
  display:grid;
  top:0;
  left:0;
  grid-template-columns:minmax(max-content,30vw);
  height:100%;
  background: rgba(255,0,0,0.4);
}

<div class="container">
  <ul>
    <li>Variable</li>
    <li>Width</li>
    <li>Content</li>
    <li>Do not collapse long text</li>
  </ul>
</div>