CODEWITHSUNDEEP
htmlcssheightflexboxbootstrap-4
Jonathan Sigg
Jonathan Sigg

Reputation: 350

Bootstrap 4 flexbox content 100% height

I Have some problems with Bootstrap 4.

I Have activated flexbox and i want content in column to be 100% height.

This is the structure:

<div class="row">
 <div class="col-md-6 col-xs-12">
  <div class="content">
  </div>
 </div>
</div>

This is the result: Flexbox

How can the gray background be 100% height? i tried with height: 100%. But the container will be 100% height of the page and not of the column. I also tried to set parent to relative and child to absolute. Doesn't worked. Background color is set on content.

Codeexample: http://jsfiddle.net/KjGZw/339/

Upvotes: 1

Views: 4036

Answers (1)

Paulie_D
Paulie_D

Reputation: 115278

You need to make the .col divs flex-containers with display:flex and apply flex-direction:column to those.

Then set the .content divs to flex:1

.row {
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.col {
  padding: 15px;
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
}
.content {
  background: purple;
  color: white;
  padding: 15px;
  flex: 1;
}
*,
:after,
:before {
  box-sizing: inherit;
}
<div class="row">
  <div class="col">
    <div class="content">
      Test
      <br />Test
      <br />Test
      <br />Test
      <br />Test
      <br />

    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
      <br>Test
      <br>Test
      <br>Test
      <br>
    </div>
  </div>
  <div class="col">
    <div class="content">
      Test
    </div>
  </div>
</div>

Upvotes: 3

Related Questions