Araused Araused - 5 months ago 32
CSS Question

Bootstrap flex columns not working correctly in Firefox

In Chrome I have 2x2

table
-

in both
row
s having
col-md-6
and
col-md-6


But in Firefox I have 4x1
table
, all
col-md-6
blocks displays in one row.

Is it possible to get 2x2 table in Firefox?

I'm using this snippet:



html,
body {
height: 100%;
}
.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>.row-flex (make columns equal heights in each row)</h3>
</div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-6">
<div class="panel panel-default flex-col">
<div class="panel-heading">Title flex-col</div>
<div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
<div class="panel-footer">Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-md-6">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-md-6">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>

</div>
<!--/row-->
</div>
<!--/container-->
<hr>





Bootply

Answer

You need to add flex-wrap:wrap to .row-flex,.row-flex > div[class*='col-']

So here you go (I removed/tweaked a bit your flex properties):

html,
body {
  height: 100%;
}
.row-flex,
.row-flex > div[class*='col-'] {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.row-flex > div[class*='col-'] div {
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>.row-flex (make columns equal heights in each row)</h3>
</div>
<div class="container">
  <div class="row row-flex">
    <div class="col-md-6">
      <div class="panel panel-default flex-col">
        <div class="panel-heading">Title flex-col</div>
        <div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
        sit aspernatur aut odit aut fugit.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Duis pharetra varius quam sit amet vulputate.
      </div>
    </div>
    <div class="col-md-6">
      <div class="well">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
      </div>
    </div>

  </div>
  <!--/row-->
</div>
<!--/container-->
<hr>

Comments