时间戳

首页 > 解决方案 > 在 flexLayout 中使 div 尽可能大

html - 在 flexLayout 中使 div 尽可能大

问题描述

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  width: 100px;
  background-color: red;
}

#stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 200px;
}

.item {
  display: flex;
  height: 30px;
  width: 100px;
  background-color: green;
  flex-shrink: 0;
}

.spacer {
  display: flex;
  height: 200px;
  flex-shrink: 1000;
}
<div id="container">
  <div class="stack">
    <div class="item">a</div>
    <div class="spacer"></div>
    <div class="item">b</div>
  </div>
</div>

如上面的代码所示，父级有一个max-height，因为它的高度是未定义的。我希望的高度spacer尽可能大。我期望的是160px在这种情况下。我试过了flex-grow，但它不起作用，因为容器没有height. 我也尝试过flex-shrink类似height代码片段中的代码。但我发现有时flex-shrink不起作用，或者有时它看起来很吓人，高度很大。

标签： htmlcssflexbox

解决方案

它不起作用，因为您为“堆栈”使用了错误的选择器 - 它是一个类，而不是 id！这应该工作：https ://jsfiddle.net/bL5w81d4/1/

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
  width: 100px;
  background-color: red;
}

.stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 200px;
}

.item {
  display: flex;
  height: 30px;
  width: 100px;
  background-color: green;
  flex-shrink: 0;
}

.spacer {
  display: flex;
  height: 200px;
  flex-shrink: 1000;
}

推荐阅读