Child of a Parent with flex grow with 100% width and height does not fill the parent

Question

In the following fiddle I am trying to get the .content divs to fill the height of the parent (.side-child), by using 100% width and height of the parent. The .side-child divs have the correct height, the only problem is getting the .content imgs to fill their parent (whilst maintaining aspect ration).

https://jsfiddle.net/d6L2bve9/5/

<div id="side">
<div class="side-child">
    <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />
</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
<div class="side-child">
        <img src="https://www.icann.org/assets/icann_logo-52672386035a35504af59606040687c8.png" class="content" />

</div>
</div>

CSS

#side {
height : 100vh;
display : flex;
flex-direction : column;
width : 50px;
}

.content {
height : 100%;
background : #ff0000;
}

.side-child {
flex-grow : 1;
}

I can get it to work by setting the .side-child position to relative and .content to absolute below

https://jsfiddle.net/5sgfcjy4/2/

But I do not understand why I have to do this since .side-child already has the correct height? Im guessing its because technically the .side-child divs do not have a height value therefore 100% cannot be used?

score 0 · Answer 1 · answered Feb 25 '17 at 13:20

You can also achieve this by using below code:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.column { 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  float: left;
}
.column li {
  background: deepskyblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="flex-container column">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

score 0 · Answer 2 · answered Feb 25 '17 at 13:22

Does this work for you?

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  flex: 1 auto;
  background : #ff0000;
}

.side-child {
  display: flex;
  width : 100%;
  height : 100%;
}

<div id="side">
  <div class="side-child">
    <div class="content">
      1
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      2
    </div>
  </div>
  <div class="side-child">
        <div class="content">
      3
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Feb 25 '17 at 13:26

Another way of doing it.

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  width : 100%;
  background : #ff0000;
}

.side-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}

https://jsfiddle.net/d6L2bve9/2/

score -2 · Answer 4 · answered Feb 25 '17 at 14:06

-2

I just ended up doing it like this

    #side {
    height : 100vh;
    display : flex;
    flex-direction : column;
    width : 50px;
    }

    .content {
    height : 100%;
    background : #ff0000;
    position : absolute;
    }

    .side-child {
    flex-grow : 1;
    position : relative;
    }

https://jsfiddle.net/5sgfcjy4/2/

answered Feb 25 '17 at 14:06

smistry

1,127
1
9
9

1

That way they grow beyond their parent width of 50px...should they really do that? – Asons Feb 25 '17 at 14:38
Yes, in my real app I dont have that restriction, do it is not a problem for me – smistry Feb 25 '17 at 18:30
2

Hmm, so why do you give us wrong conditions to work with then?? – Asons Feb 25 '17 at 18:33
The width was just added to demo the jsfiddle, as originaly there were no images to make up the width which would have meant a width of 0 – smistry Feb 25 '17 at 18:37

Child of a Parent with flex grow with 100% width and height does not fill the parent

4 Answers4