5

I currently have a flexbox layout that looks like this:

enter image description here

The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item". 

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box? Can you shrink flexboxes down to the same height as the shortest box?

enter image description here

Dave
  • 1,257
  • 2
  • 27
  • 58
  • What's creating the space in both sets of boxes? You should post your markup, too, and give a working example of the current layout that you're trying to change. – Michael Coker Feb 07 '17 at 22:12
  • Question was marked as a duplicate, so I can't provide an answer. Here's a fiddle I put together to address your specific code: https://jsfiddle.net/euqjxxr9/. My guess is that you have height explicitly set on the items. The linked version is a completely relative one where the height is set in one place (the `.wrap` element) – Joseph Marikle Feb 07 '17 at 22:34

1 Answers1

0

An easy way to achieve this would be to make sure that the height of both your columns with the .wrap-col class is this same (either set a fixed height or set height: 100% and have them both fill the space of the .wrap element). Then make sure flex-shrink: 1 is set for all flex items to.

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 1 auto;
  flex-direction: column; 
}

Here is a jsfiddle. Try changing the height of the .wrap element and you can see the boxes resizing to fit.

Dylan Stark
  • 2,325
  • 17
  • 24
  • Thanks Dylan and @joseph, so do i NEED to set a height for class wrap in order to achieve this? – Dave Feb 07 '17 at 22:47
  • Hi @Dave, yes in order for the flex-box to shrink the containing flex items, the box itself has to have height set in one way or another. Without a set height the flexbox has no reason to try to shrink or grow its internal items to match its height, it just leaves the items as they would normally render. – Dylan Stark Feb 07 '17 at 22:56
  • You don't need a set height for the wrap but I don't know if this matches your needs since I don't know what you're using to size the boxes. https://jsfiddle.net/jdxstyxv/1/ – Alejalapeno Feb 07 '17 at 23:20
  • Hi @Alejalapeno did you mean to link to the fiddle that I just created specifically to answer this question? – Dylan Stark Feb 07 '17 at 23:46
  • It's modified. You'll notice the wrapper does not have a height. – Alejalapeno Feb 08 '17 at 06:40
  • @Alejalapeno ah sorry, I see that it is edited now. Yes you are right that my fiddle doesn't need an implicit height on the wrap! Flex-box can work with the height of the `.big` div which I set as a fixed 600px but the OP hadn't indicated a set height on any flex items or boxes in his question. – Dylan Stark Feb 08 '17 at 22:11