Question

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

黄色，高度为100％，有8个孩子（红色的孩子），宽度尽可能小，具体取决于孩子的数量。红色的高度和宽度固定不变。
白色，宽度为100％（占据页面的其余部分并位于页面的右侧）

看看下面的代码片段。 我希望黄色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红色divs 例如当页面高度=〜3红色divs

我想要一个纯CSS解决方案（没有js）。 Flex-box还可以。

Answer 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>

CSS：div占用最小宽度，而max-height =页面高度

1 个答案: