Ivan Topić Ivan Topić - 3 months ago 10
CSS Question

Columns with same height but various content length and a button on bottom

I am trying to set 3 columns in a row with same height. Everything works so far using flex and fixed height except that paragraph is cut out. Both the title and text could be of various length. Currently

.btn-wrapper
has
padding-top
which gives illusion of space around. Is there a way to fix that so that all letters are visible? It doesnt matter how paragraph ends, only that there is a space between button and the text.

Is there a better way to go around this?

http://codepen.io/anon/pen/QKbAwb?editors=1100

<div class="col col-md-4">
<div class="col-inside">
<p>Lorem ipsum..../p>
<div class="btn-wrapper">
<a href="#" class="btn btn-default">Read more</a>
</div>
</div>
</div>


.col {
display: flex;
}

.col-inside {
flex: 1;
flex-direction: column;
height: 200px;
overflow: hidden;
position: relative;
}


.btn-wrapper {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 20px;
background-color: #fff;


}

Currently if the text is long it will be cut out like in this image

enter image description here

Answer

You don't need a fixed height, you need to extend the flex properties to the .row div.

This will automatically make all the columns the same height.

Oh and you don't need to position the button div either...flexbox can do that to.

.row {
  display: flex;
}
.col {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.col-inside {
  border: 1px solid #999;
  flex: 1;
  display: flex;
  margin: 0 10px;
  flex-direction: column;
}
h2 {
  margin-top: 0;
  font-size: 26px;
  font-weight: 600;
  padding: 20px;
  padding-bottom: 0;
}
.author {
  font-style: italic;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0 20px;
}
p {
  padding: 0 20px;
}
.btn-wrapper {
  margin-top: auto;
  width: 100%;
  padding-top: 20px;
  background-color: #fff;
}
.btn.btn-default {
  width: 100%;
  display: block;
  border-radius: 0;
  background-color: grey;
  color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">


    <div class="col col-md-4">
      <div class="col-inside">
        <img src="http://placehold.it/420x150" class="img-responsive" />
        <h2>Some title</h2>
        <div class="author">John Smith</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati dolores at cupiditate ullam quaerat earum, quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! magni explicabo eveniet saepe!</p>
        <div class="btn-wrapper">
          <a href="#" class="btn btn-default">Read more</a>
        </div>
      </div>
    </div>

    <div class="col col-md-4">
      <div class="col-inside">
        <img src="http://placehold.it/420x150" class="img-responsive" />
        <h2>Some title longer Some title longer Some title longer Some title longer</h2>
        <div class="author">John Smith</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui cupiditate quaerat earum, magni explicabo eveniet saepe!</p>
        <div class="btn-wrapper">
          <a href="#" class="btn btn-default">Read more</a>
        </div>
      </div>
    </div>

    <div class="col col-md-4">
      <div class="col-inside">
        <img src="http://placehold.it/420x150" class="img-responsive" />
        <h2>Some title</h2>
        <div class="author">John Smith</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui obcaecati dolores at cupiditate ullam quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores Qui obcaecati dolores at cupiditate ullam
          quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet,
          consectetur adipisicing elit. Qui obcaecati dolores</p>
        <div class="btn-wrapper">
          <a href="#" class="btn btn-default">Read more</a>
        </div>
      </div>
    </div>

  </div>
</div>

Codepen Demo