0

I want to set height of child element of flexbox item to 100%. But it doesn't work.

This is the jsFiddle link of these code.

Now, I compromised this solution with setting position : absolute and top : 0; right : 0; bottom : 0; left : 0; of the inner child element. Can you tell me why the method above cannot work? Is there any solution not doing with position. enter image description here

icese7en
  • 142
  • 1
  • 10
  • Why so many children? You can't just use two divs, one for each column? – misterManSam Dec 04 '14 at 07:40
  • @misterManSam I need put some content in the child element such as `.wrapper__second__thumb__inner`. Maybe I have wrong used the flexbox? – icese7en Dec 04 '14 at 07:44
  • It's hard to say :) It looks like you just want two columns [like this example](http://jsbin.com/nufudi/1/edit?html,css,output) but I don't know what outcome you want. – misterManSam Dec 04 '14 at 07:48
  • @misterManSam I have update my post and that is my requirement for outcome. Also, there will be more content like blue area(it can expand out the left side of red area) – icese7en Dec 04 '14 at 08:30

2 Answers2

1

It's because you're using height: 100% for .wrapper__second__thumb__inner, which is contained inside .wrapper__thumb that doesn't have height for itself (0px height), so .wrapper__second__thumb__inner will also have 0px height.

What you need is to add height: 100% to .wrapper__thumb, or remove it completely from the HTML, so .wrapper__second__thumb__inner will have it's height directly from the .wrapper__second

Here's the Updated Fiddle

Kyojimaru
  • 2,694
  • 1
  • 14
  • 22
  • @icese7en can you add some picture of how you wanted it to be? – Kyojimaru Dec 04 '14 at 08:17
  • I already add an image in the question. in the red area i also need to put more content like the blue area(images) – icese7en Dec 04 '14 at 08:27
  • @icese7en, sorry for the late reply, did you mean something like [this](http://jsfiddle.net/Kyojimaru/qh8k6pft/7/)? – Kyojimaru Dec 04 '14 at 09:28
  • yes, this reproduction is very precise! You can see that, the 100% height of the inner img doesn't work(neither all other elements in the `wrapper__second__thumb__inner`). – icese7en Dec 04 '14 at 09:46
  • @icese7en the `100% height` of the inner image is working because the real image size is `2880x1800`, but there's no padding set to the `wrapper__second__thumb__inner`, so the `image` cover the `wrapper__second__thumb__inner`. Perhaps [this](http://jsfiddle.net/Kyojimaru/qh8k6pft/8/) is what you really wanted to have? – Kyojimaru Dec 04 '14 at 09:52
  • No, if I delete the `float` property of img, it also doesn't work.(even if I set the height of img to 1%) – icese7en Dec 04 '14 at 10:33
  • @icese7en, this is a problem with the `Browser` I think, I've got the same problem on `Google Chrome` but it's fine for `Firefox`, I think you need to stick with the `position: absolute` way, here's some [link](http://stackoverflow.com/questions/15381172/css-flexbox-child-height-100) for reference – Kyojimaru Dec 05 '14 at 02:19
0

Use vh unit for height and vw for width

.wrapper {
    display : flex;
    align-items : center;
    flex-flow : row nowrap;
    justify-content : space-between;
    background-color : lightblue;
    width : 100vw;
    height: 100vh;
}

Updated fiddle: http://jsfiddle.net/qh8k6pft/3/

more info here : http://css-tricks.com/viewport-sized-typography/

theLeanDeveloper
  • 391
  • 4
  • 14
  • I don't need to expand this block to the whole area of viewport. Just inside the `wrapper__second` container. You could see the latest update of my jsFiddle, there were some errors in early version – icese7en Dec 04 '14 at 08:19