Border On Equal Height Columns With Bootstrap Flex

I am using Bootstrap with a mechanism to give equal column heights. I am trying to give a coloured left and right border to both columns, but Bootstrap is preventing it. I original

Solution 1:

I have simplified the CSS. I'm not sure I understand the problem. There are borders around the boxes. Can you elaborate a little on the issue?

.container-fluid {
   padding-left: 0px;
   padding-right: 0px;
}

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 481px) {
  .flex-row {
    display: flex;
  }
}

#sidebar {
   background: lightgreen;
   border: solid 10px red;
   margin: 0;
}

#main {
   background: pink;
   border: solid 10px red;
   border-left: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row flex-row">
    <div class="col-sm-3" id="sidebar">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
    <div class="col-sm-9" id="main">
      <div>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
      </div>
    </div>
  </div>
</div>

Solution 2:

Based on Gerard's comment to his answer, this is the solution that works in a simple template at least. Thank you!

.container-fluid {
   padding-left: 0px;
   padding-right: 0px;
}

#sidebar {
   background: lightgreen;
   border: solid 10px red;
   margin: 0;
}

#main {
   background: pink;
   border: solid 10px red;
}


/* ANYTHING SMALLER THAN Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
   #sidebar {
      margin-left: 15px;
      margin-right: 15px;
   }
   #main {
      margin-left: 15px;
      margin-right: 15px;
      border-top: 0px;
   }
}


/* ANYTHING LARGER THAN Extra Small Devices, Phones */

@media only screen and (min-width: 481px) {
   .flex-row {
      display: flex;
   }
   .flex-row>[class*='col-'] {
      display: flex;
      flex-direction: column;
   }
   .flex-row.row:after,
   .flex-row.row:before {
      display: flex;
   }
   #sidebar {
      margin-left: 15px;
      border-right: 0px;
   }
   #main {
      margin-right: 15px;
   }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
   <div class="row flex-row">
      <div class="col-sm-3" id="sidebar">
         <div>
            <p>menu item</p>
            <p>menu item</p>
            <p>menu item</p>
         </div>
      </div>
      <div class="col-sm-9" id="main">
         <div>
            <p>actual content</p>
            <p>actual content</p>
            <p>actual content</p>
            <p>actual content</p>
            <p>actual content</p>
            <p>actual content</p>
            <p>actual content</p>
         </div>
      </div>
   </div>
</div>