CODEWITHSUNDEEP
htmlcssflexbox
Mary Oleksiuk
Mary Oleksiuk

Reputation: 105

How can i do wrapping of child elements inside Flex container?

Is it possible to do wrapping of child elements inside flexbox container but setting up height in percentages (for .wrap, .block and .mini)? Like here - http://jsfiddle.net/4cghpvyo/19/, but in % to make it responsive. Or any other idea how to make it responsive?

.wrap {
display: flex;
width: 100%;
height: 500px;
border: 1px solid #ccc;
flex-wrap: wrap;
flex-direction: column;
}

.block {
    width: 30%;
    height: 500px;
    background-color: yellow;
}

.mini {
    box-sizing: border-box;
    width: 70%;
    height: 125px;
    background-color: orange;
    border: 1px solid red;
}

Thanks!

Upvotes: 1

Views: 2435

Answers (1)

Asons
Asons

Reputation: 87191

Viewport units (vh/vw) is commonly used to give a parent a responsive but fixed height, where percent on its children will work, though can sometimes not be possible.

For height: 100% to work on the wrap, its parent need a set height (or being position absolute), and if the parent also use percent, its parent need a height, and so on, until the html element is reached, which height is set to the viewport's height.

Here showed by applying height to the html and body.

For the items it then becomes simple, and in your case, the block set to 100% and the mini to 25%, both columns will fill the parent height.

html, body {
    height: 100%;
    margin: 0;
}

.wrap {
    display: flex;
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    flex-wrap: wrap;
    flex-direction: column;
}

.block {
    width: 30%;
    height: 100%;
    background-color: yellow;
}

.mini {
    box-sizing: border-box;
    width: 70%;
    height: 25%;
    background-color: orange;
    border: 1px solid red;
}
<div class="wrap">
    <div class="block"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
</div>

Based on a comment, you mentioned that block might contain different sized images that should make up for the height, then with the given markup and using flex column direction, that won't be possible, as flex column items need its parent to have a fixed height, or else they won't wrap.

A simple solution to the problem would be to set the wrap's flex direction to row, add an extra element around the mini's (inner-wrap) and make it a flex column container.

.wrap {
    display: flex;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.block {
    width: 30%;
    background-color: yellow;
}
.block img {
    display: block;
    width: 100%;
}
.inner-wrap {
    width: 70%;   
    display: flex;
    flex-direction: column;
}
.mini {
    box-sizing: border-box;
    height: 25%;
    background-color: orange;
    border: 1px solid red;
}
<div class="wrap">
  <div class="block">
    <img src="http://placehold.it/200x300">
  </div>
  <div class="inner-wrap">
    <div class="block"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
  </div>
</div>

Upvotes: 2

Related Questions