CODEWITHSUNDEEP
htmlcssflexbox
deathangel908
deathangel908

Reputation: 9699

css: div takes minimal width and max-height = page height

I have a page where there's no scroll (nor vertical nor horizontal). Body is blue. This body has 2 children:

Take a look at the snippet bellow. I want yellow div to have height 100% and have minimal width that depends only on amount of children .

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>

E.g. 6 situations bellow, each one has minimal width and height = 100% of page height.

enter image description here

e.g. when page height =~ 5 red divs enter image description here e.g. when page height =~ 3 red divs enter image description here

I would like to have pure css solution (no js). Flex-box is ok.

Upvotes: 2

Views: 79

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

Here is a non-perfect solution using flexbox. Visually you will have the needed result BUT There is few issues: The white is overflowing and I had to put it in the container of the red elements.

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>

Upvotes: 1

Related Questions