CSS Grid 使用特定的元素高度作为最大行高

Question

我试图防止侧边栏高度超过内容高度。
“区域”将包含任意高度的图像，因此它的高度不是固定的或事先不知道的。

function toggleTabsContent() {
	const display = document.querySelector('.content').style.display;
  if (display == "none") {
  	document.querySelector('.content').style.display = "block";
  } else {
  	document.querySelector('.content').style.display = "none";
  }
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "tabs area"
    "footer footer";
}

.tabs {
  grid-area: tabs;
  background: #FF9800;
}

.area {
  grid-area: area;
  height: 200px;
  background: #673AB7;
}

.footer {
  grid-area: footer;
  background: #607D8B;
  height: 40px;
}

.content {
  height: 250px;
}

<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>

<div class="grid">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
  <div class="footer"></div>
</div>

JSFiddle

Answer 1

Display: flex; 允许很大的灵 active - 事实上，它的目的正是根据其中的内容将高度或宽度 flex 到所需的尺寸。

根据您的问题，这正是您所需要的。

我已将您的页脚与网格分开，以便将静态大小的元素与您希望灵活调整的元素分开。

接下来，我为您的区域添加了一个最小宽度，以避免它完全折叠。但是，如果您想要此功能，可以将其删除。即，如果您希望在没有图像时不显示它，您可以将其删除。

最后，display: flex; 和 flex-flow: row nowrap; 允许调整大小，对于网格中的元素(现在命名为“flex” ) 以相同的尺寸彼此相邻放置，并且它们不会换行到下一行以适应尺寸变化。

function toggleTabsContent() {
  const display = document.querySelector('.content').style.display;
  if (display == "none") {
    document.querySelector('.content').style.display = "block";
  } else {
    document.querySelector('.content').style.display = "none";
  }
}

.flex {
  display: flex;
  flex-flow: row nowrap;
}

.tabs {
  background: #FF9800;
  height: auto;
  width: 100%;
}

.area {
  height: auto;
  min-height: 200px;
  width: 100%;
  background: #673AB7;
}

.footer {
  background: #607D8B;
  height: 40px;
}

.content {
  height: 400px;
}

<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>

<div class="flex">
  <div class="tabs">
    <div class="content" style="display: none"></div>
  </div>
  <div class="area"></div>
</div>
<div class="footer"></div>