Equal Height nested divs in bootstrap

Question

So I'm working on a group of content boxes that each contain an image, content and a border at the bottom of the container. Now I need to get the containers equal in height (as it looks a lot neater) but I'm having trouble as the div i am applying the border to is within the col-xx-xx div , as I want the guttering to apply.

edit: thought it was worth mentioning, that the full-height-item divs are all working and 100% height of their parent .full-height , however I cannot get the div within these to either fill out their parent, or sit at the bottom so I can apply a border-bottom or background-color and height of the div depending on which method would be best?

here is my markup:

.full-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
}

.full-height-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<ul class="full-height">
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
    <li class="full-height-item col-md-4">
        <div>
            <img alt="" class="img-responsive center-block" src="url" /><br>
            <span style="font-size: 1.2em; font-weight: 500; color: #0067b1">CONTENT TITLE</span><br><br>
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            <div class="full-height-item-content" style="height: 1em; background-color: black"></div>
        </div>
    </li>
</ul>

Answer 1

Your question is not entirely clear to me, so I may be misinterpreting some aspects. However, here are a few issues you may want to address:

1. Nesting Flexboxes

When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.

Your main container ( .full-height ) is a flex container, which means that its children ( .full-height-item ) are flex items. You've also applied display: flex to the flex item, which makes it a nested flex container, and the div child containing the content elements is a flex item.

However, the div itself is not a flex container, which means its child elements are not flex items and flex properties (like align-items: stretch ) will have no effect on them.

So the first step is to make the div a flex container as well, like its parent. Flex properties can then apply to the children. Add this to your code:

.full-height-item > div {
    display: flex;
    flex-direction: column;
}

2. Anonymous Flex Items

You have content (the text text text ... ) that is not wrapped in any element. This is considered an anonymous flex item , which is able to inherit properties from the parent but – like anonymous block and anonymous inline boxes – is unselectable and therefore unstyleable .

So if you want to apply styles to the text consider wrapping it in a <span> , <div> or other element.

<span>text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text</span>

3. flex: 1

You can tell all flex items to grow to fill the container, or you can tell just one. Here I'm specifying that the content section should grow:

.full-height-item > div > span:last-of-type {
    background-color: lightgreen;
    flex: 1;
}

With these adjustments you have three equal height containers with a border at the bottom.

DEMO: http://jsfiddle.net/1s613h8g/4/