主页 / coding / 问题 / 79596868
Accepted
s427
Asked: 2025-04-29 00:02:30 +0800 CST

在 min() 函数中使用 max-content

  • 772

使用网格为 Web 应用程序构建布局，我有一个侧边栏，我希望它足够宽以容纳其内容（所以，max-content），但我不希望它变得太大，比如说不超过视口的 20%（所以，20vw）。

我以为我会使用一些简单的东西：

.page {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: min(max-content, 20vw) 1fr;
  grid-template-areas: "side main";
}

但是 Firefox 提示我grid-template-columns值不正确，因此被忽略。如果我直接使用：

  grid-template-columns: max-content 1fr;

然后它就可以工作了，但是我没有想要避免侧边栏过大的安全措施。

CSS 函数中是否不允许使用诸如min-content和 之类的关键字？max-content

还有什么其他方法可以实现我的目标？

css

3 个回答

  1. Best Answer

    看起来您正在寻找fit-content()函数：

    // just a test button

button.onclick = function() {
  const sidebar = this.closest('.page').querySelector('.sidebar');
  if (this.classList.contains('active')) {
    sidebar.textContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, exercitationem?';
  } else {
    sidebar.textContent = 'Lorem ipsum';
  }
  this.classList.toggle('active');
}
    * {
  margin: 0;
}

.page {
  display: grid;
  height: 100vh;
  grid-template-columns: fit-content(20%) 1fr;
}

.sidebar {
  background: yellow;
}

.main {
  background: blue;
}
    <div class="page">
  <aside class="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, exercitationem?</aside>
  <main class="main">
    <button id="button">just a test button</button>
  </main>
</div>

    • 2

  2. 不要使用固有最小宽度，尝试使用minmax()CSS 函数为“side”设置绝对最小宽度。下面的演示可以设置grid-template-columns左右列（两个<select>）的值和一个选项（复选框），从而转换为简单的弹性布局。如果“side”的内容较少，那么还max-content可以；但如果内容较多，除非你通过minmax()“side”和“main”限制，否则我不建议这样做。如果你设置了最大值，20vw它会随着视口的扩大和缩小，所以它是固有的，所以它的行为不会像你预期的那样。

    注意：您可能会遇到一个非常恼人的 bug，它会影响<select>Stack Snippet 内部。所以，如果<select>s 不起作用，请转到此处CodePen（我建议你去那里，这样更容易调整窗口大小）。

    另外，在模式下查看演示Full page并调整窗口大小。

    // For demo purpsoses
const root = document.documentElement;
const main = document.querySelector("main");
const left = document.querySelector("aside");
const right = document.querySelector("article");

const ui = document.forms.ui;
const io = ui.elements;

io.view.value = `${io.left.value} ${io.right.value};`;

ui.onchange = (e) => {
  const chg = e.target;
  if (chg.name === "lr") {
    root.style.setProperty("--l", io.left.value);
    root.style.setProperty("--r", io.right.value);
    io.view.value = `${io.left.value} ${io.right.value};`;
  } else if (chg.id === "flex") {
    io.left.toggleAttribute("disabled");
    io.right.toggleAttribute("disabled");
    main.classList.toggle("flex");
    io.view.value = chg.checked ? "flex;" : `${io.left.value} ${io.right.value};`;
  }
};
    /* For demo purposes */
:root {
  --l: 150px;
  --r: minmax(450px, 80vw);
  font: 2ch/1.5 "Segoe UI";
}

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

/* See the blue text for the value of grid-template-columns */
main {
  display: grid;
  grid-template-columns: var(--l) var(--r);
  grid-template-areas: "aside article";
  column-gap: 0.5rem;
  max-width: 100vw;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* The rest is for demo purposes */

.rel {
  position: relative;
}

aside {
  color: red;
}

form {
  position: absolute;
  bottom: -20vmin;
  left: 1rem;
  z-index: 1;
  background: #ddd;
}

fieldset {
  padding-bottom: 0.5rem;
}

select {
  font: inherit;
}

output {
  display: inline-block;
  margin: 0.5rem 0;
  color: blue;
}

#view {
  display: inline-block;
}

#view::before {
  content: "grid-template-columns: ";
  color: black;
}

.flex {
  display: flex;
}

.flex aside {
  flex: 1 1 auto;
}

.flex article {
  flex: 0 1 auto;
}

.flex #view {
  display: inline-block;
}

.flex #view::before {
  content: "Main display: ";
  color: black;
}

#auxl,
#auxr {
  display: none;
}

#auxl::before {
  content: "Left flex: ";
  color: black;
}

#auxr::before {
  content: "Right flex: ";
  color: black;
}

.flex #auxl,
.flex #auxr {
  display: inline-block;
}
    <main class="rel">
 <aside>
  <p>No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
 </aside>
 <article>
  <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
 </article>
 <!-- The rest is for demo purposes -->
 <form id="ui">
  <fieldset>
   <output id="view"></output>&nbsp;
   <output id="auxl">1 1 auto</output>&nbsp;
   <output id="auxr">0 1 auto</output><br>
   <label>Left&nbsp;
    <select id="left" name="lr">
     <option value="minmax(150px, 20vw)">minmax(150px, 20vw)</option>
     <option value="minmax(20vw, max-content)">minmax(20vw, max-content)</option>
     <option value="minmax(min(150px, 20vw), max-content)">minmax(min(150px, 20vw), max-content)</option>
     <option value="max-content">max-content</option>
     <option value="20vw">20vw</option>
    </select>
   </label>
   <label>&nbsp;Right&nbsp;
    <select id="right" name="lr">
     <option value="minmax(450px, 80vw)">minmax(450px, 80vw)</option>
     <option value="minmax(80vw, max-content)">minmax(80vw, max-content)</option>
     <option value="max-content">max-content</option>
     <option value="1fr">1fr</option>
     <option value="80vw">80vw</option>
    </select>
   </label>
   <label>&nbsp;flex&nbsp;
    <input id="flex" type="checkbox">
   </label>
  </fieldset>
 </form>
</main>

    • 0

  3. CSS 函数中是否不允许使用诸如 min-content 和 max-content 之类的关键字？

    它们在 min() 中是不允许的。请阅读此处的文档。

    要指定尺寸范围，您需要使用minmax()。这确实可以接受max-content，但是最大内容在网格中并不像您假设的那样起作用。

    尽可能宽以容纳其内容

    相反，它提供了内容可以容纳的最大尺寸。在这种情况下，它永远不会缩小。

    您可能正在寻找minmax(min-content, 20vw)以下内容：

    .parent {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(min-content, 20vw) 1fr;
}


.sidebar {
  background-color: lightblue;
}


.content {
  background-color: lightgreen;
}
    <div class="parent">
  <div class="sidebar">
    SIDEBAR CONTENT GOES BRRRRRRRRR
  </div>
  <div class="content">
    MAIN CONTENT
  </div>
</div>

    此外，如果您希望强调 20vw 的限制，即使您的内容太大，您也可以使用minmax(auto, 20vw)

    .parent {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(auto, 20vw) 1fr;
}


.sidebar {
  background-color: lightblue;
}


.content {
  background-color: lightgreen;
}
    <div class="parent">
  <div class="sidebar">
    SIDEBAR CONTENT GOES BRRRRRRRRR
  </div>
  <div class="content">
    MAIN CONTENT
  </div>
</div>

    您需要真正减小宽度才能看到差异。

    PS：请阅读文档中有关 min-content 和 auto 关键字的描述以获得澄清。

    • -1

相关问题