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

Question

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

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

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

举个例子，可以滑动编辑器window收起菜单：

基本元素结构：

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

您可以使用 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>

Answer 2

还有 flexbox

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>

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

Set a div that has a percentage (%) width to have a min-width of its largest content

css

min

width

percentage