CODEWITHSUNDEEP
htmlcssflexbox
MauriceNino
MauriceNino

Reputation: 6757

Can you let child elements take 50% of the parent one level above?

So basically I want to have some kind of gallery with multiple elements in one row, until the row is filled - then it should swap to the next row.

This is all working, just the parent container of the single items has 100% height, so that the children can have 50% of that. The result is, that the padding at the bottom is not visible because the parent container does not grow with its children:

#container { /* should not be touched */
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

What I have tried:

min-height: 100% instead of height: 100% - results in the children just taking their contents height:

#container {
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  min-height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element">test</div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

remove height - results in the children just taking their contents height:

#container {
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element">test</div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

Is there any way to have the inner container height: 100%, but grow if needed? Or just have it at height: auto and let the children take 50% of the #container?

Upvotes: 0

Views: 55

Answers (1)

Temani Afif
Temani Afif

Reputation: 273571

Simply add the overflow to the inner container instead:

#container { /* should not be touched */
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  height: 100%;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

Upvotes: 3

Related Questions