css: div принимает минимальную ширину и max-height = высоту страницы - PullRequest
Новая
       15

css: div принимает минимальную ширину и max-height = высоту страницы

0 голосов
/ 29 августа 2018

У меня есть страница, где нет прокрутки (ни вертикальной, ни горизонтальной). Тело синее. У этого тела 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% высоты страницы.

enter image description here

например. когда высота страницы = ~ 5 красных дел enter image description here например когда высота страницы = ~ 3 красных дел enter image description here

Я бы хотел иметь чистое решение css (без js). С флекс-боксом все в порядке.

1 Ответ

0 голосов
/ 29 августа 2018

Вот не идеальное решение с использованием 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...