css: div 采用最小宽度和 max-height = 页面高度答案

【问题标题】：css: div takes minimal width and max-height = page heightcss: div 采用最小宽度和 max-height = 页面高度
【发布时间】：2019-02-04 16:30:42
【问题描述】：

我有一个页面没有滚动（也没有垂直或水平）。身体是蓝色的。这个身体有 2 个孩子：

黄色，高度为 100%，有 8 个孩子（红色），宽度尽可能小，这取决于孩子的数量。红色的采用固定的已知高度和宽度。
白色，宽度为 100%（占据页面的其余部分并位于其右侧）

看看下面的sn-p。 我希望黄色 div 的高度为 100%，并且宽度最小，仅取决于子项的数量。

body  {
  background-color: blue;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
   height: 100%;
} 
.yellow  {
  background-color: yellow;
  height: 100%;
}
.white  {
  background-color: white;
  border: 4px solid green;
  width: 100%;
}
.red  {
  display: inline-block;
  height: 20px;
  margin: 5px;
  width: 35px;
  background-color: red;
}

<body>
<div class="yellow">
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
<i class="red"></i>
</div>
<div class="white">

</div>
</body>

例如以下 6 种情况，每种情况的最小宽度和高度 = 页面高度的 100%。

例如当页面高度 =~ 5 个红色 div 例如当页面高度 =~ 3 个红色 div

我想要纯 css 解决方案（没有 js）。 Flex-box 没问题。

【问题讨论】：

html{height:100%} 是你想要的吗？
是的，但高度为 100% 的黄色 div 应采用最小宽度。我编辑了上面的 sn-p，所以黄色 div 有 4 列（红色方块），但可以容纳 2。我希望它能够 flex-wrap 孩子。

标签： html css flexbox

【解决方案1】：

这是一个使用 flexbox 的非完美解决方案。从视觉上看，您将获得所需的结果，但问题很少：白色溢出，我不得不将其放入红色元素的容器中。

html {
  height: 100%;
  /*simulate height change*/
  animation: change 3s infinite linear alternate;
}

@keyframes change {
  to {
    height: 20%
  }
}

body {
  background-color: blue;
  width: 100%;
  height: 100%;
  margin: 0;
}

.yellow {
  background-color: yellow;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  border-right: 4px solid green;
}

.white {
  background-color: white;
  border: 4px solid green;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.red {
  height: 20px;
  margin: 5px;
  width: 35px;
  background-color: red;
}

<div class="yellow">
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>
  <i class="red"></i>

  <div class="white">
  </div>
</div>

【讨论】：

如何使溢出正确地在白色 div 上工作？当 div 在黄色框之外时，它起作用了。现在它缺少垂直滚动，水平滚动有点从“黄色 div 的宽度”px 上的黄色 div 移动。
@deathangel908 这是最棘手的部分。我在白色上添加了 width:100% 所以它肯定会溢出，我在主容器中添加了一个边框以产生视觉错觉......实际上这是唯一的问题，找到放什么而不是 width:100%
@deathangel908 因为它溢出了，所以你看不到垂直滚动条..尝试减小宽度：100% 你会明白
我无法减小宽度，因为在你的情况下它应该是 calc(100% - Npx) 其中N 是我不知道的黄色 div 的宽度。在我应用我的更改后，您能否编辑您的答案？
@deathangel908 确切地说，这就是我们这里缺少的，未知的 N