Bootstrap well same height

Question

I use the bootstrap class well for decoration. I have two divs with different amount of entries inside. Is it possible that both wells fill their parent and have always the same height no matter how many entries they contain?

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
                <div>Item 5</div>
                <div>Item 6</div>
            </div>
        </div>
        <div class="col-xs-4">
            <strong>Title</strong>
            <div class="well well-sm">
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
            </div>
        </div>
    </div>
</div>

I tried different solutions but didn’t succeed. I want to avoid the flex box layout because of its weak support. If I use tables instead of bootstrap columns I get the same result. How can I handle this with CSS (and possibly without adding JavaScript) ?

jsfiddle

Answer 1

I use this solution for that problem

Without JavaScript.

I found it on this link.

<div class="row row-flex row-flex-wrap">
    //Your well code
</div>

UPDATE

and add this css:

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

Hope this will helpfull.