Flex display does not work with CSS property

Question

Flex display does not work with CSS property

Asked 6 years ago

Viewed 781 times

1

I am unable to use the following Ivs with the properties:

.grid {
  display: block;
}

@media (min-width: 992px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
}

.column.left {
  flex: 4;
  background-color: red;
}

.column.right {
  flex: 8;
  background-color: blue;
}

I realized that if I remove this:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

works perfectly, but if I let it doesn’t work, the problem is that I need the box-Sizing

<main class="main">
      <section class="section">
        <div class="container">
          <div class="grid">
            <div class="column left">a</div>
            <div class="column right">a</div>
          </div>
        </div>
      </section>
    </main>

Put HTML in question also that facilitates.

– Sam

2018/06/15 at 00:43
@ready dvd added

– Banks

2018/06/15 at 00:43
face, that I know the Bootstrap already has by default the border-box in the elements. I tested here and I saw no different behavior.

– Sam

2018/06/15 at 00:50
but I’m not wearing bootstrap

– Banks

2018/06/15 at 00:53

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Lucas Coelho • **126** points · Answer 1 · 2019-02-16T00:37:10+00:00

Hello, I had the same problem with a template and solved by inserting a class as the example:

<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
    <style>
    .display_flex {
        display: flex;
        flex-flow: row wrap;
    }
    </style>
</head>
<body>
    <div class=" row display_flex">
        <div class="col-md-4 col-xs-12 col-sm-6">
             <div class="box box-success">
                  <div class="box-header with-border">
                  </div>
             </div>            
        </div>      
    </div>
</body>
</html>

The recommendation is for this class in the same <div> of row. Could be configured in the row but this could affect other parts. This class can be inserted into the file style "general".