主页 / 问题 / 1591463
Accepted
eccs0103
Asked:2024-08-21 18:42:15 +0800 CST2024-08-21 18:42:15 +0800 CST

使用默认值对网格布局进行约束

  • 772

描述

我想使用 CSS - 网格创建类似的东西：

内容需要多少？ 尽量 内容需要多少就多少，但不能多30vmin
尽量 menu-area toolkit-area
内容需要多少？ menu-area status-area toolkit-area

实际上我创建：

div.container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 'menu-area -1- toolkit-area' 1fr 'menu-area status-area toolkit-area' auto / auto 1fr minmax(auto, 30vmin);
}

div.menu {
  grid-area: menu-area;
  background-color: red;
}

div.status {
  grid-area: status-area;
  background-color: green;
}

div.toolkit {
  grid-area: toolkit-area;
  background-color: blue;
}
<div class="container">
  <div class="menu">
    <img alt="Icon">
  </div>
  <div class="status">
     <img alt="Icon">
  </div>
  <div class="toolkit"></div>
</div>

问题是toolkit-area（蓝色区域）默认需要30vmin，但是里面没有内容。
既然我问了minmax(auto, 30vmin)，出于某种原因他决定30vmin即使没有内容他也应该接受它。

问题

我希望它的宽度与内部内容所需的宽度一样宽，但不能更大30vmin，也不是30vmin默认值。但我无法控制默认大小。诸如minmax(0, 30vmin)或 之类的选项不起作用minmax(min-content, 30vmin)。 如何解决这个问题？minmax(max-content, 30vmin)

澄清

由于该区域中可以存在完全不同的面板toolkit-area，即不能设置其大小auto和设置面板的最大宽度max-width: 30vmin。
我们不要再深入，只是接受这不是一个选择。 :)

css

1 个回答

  1. Best Answer

    这个问题有很多不可理解的地方......对minmax(...) 的如此热爱从何而来？最大宽度有什么问题？为什么是vmin而不是vmax？

    下面的解决方案完全回答了问题本身，但澄清却与之相反。

    div.container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 'menu-area . toolkit-area' 1fr 'menu-area status-area toolkit-area' auto / auto 1fr min-content;
}

div.menu {
  grid-area: menu-area;
  background-color: red;
}

div.status {
  grid-area: status-area;
  background-color: green;
}

div.toolkit {
  grid-area: toolkit-area;
  background-color: blue;
  max-width: 30vmin;
}
    <div class="container">
  <div class="menu" contenteditable>
    <img alt="Icon">
  </div>
  <div class="status" contenteditable>
     <img alt="Icon">
  </div>
  <div class="toolkit" contenteditable>toolkit</div>
</div>

    我特地使块可编辑，以便我可以检查所有内容是否根据需要进行拉伸和约束。

    • 1

相关问题