0

I have three DIV containers with Bootstrap 3, whereby the first two are in the first row and the third in the next row up to browser width until 991 px. Higher than 992 px, all three containers should be in one row. The heights of the containers per row should be the highest (100%).

My example works with Chrome the way I want it to. Unfortunately Safari on macOS and iOS not. In Safari, smaller than 992px display the two first containers one below the other instead of side by side.

What is the work around for this?

.inner-container{
          background-color: #f0f0f0;
          padding: 10px;
          font-size: 16px;
          height: 100%;
        }

        @media (max-width: 991px) {
          .map{
            height: 250px;
            margin-top: 15px;
          }
          .row{
            display: flex;
            flex-wrap: wrap;
          }
        }

        @media (min-width: 992px) {
          .row{
            display: flex;
          }
        }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                </div>
            </div>
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. AtLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-4">
                <div class="inner-container map">
                    <p>map</p>
                </div>
            </div>
          </div>
        </div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
teccrow
  • 85
  • 1
  • 9
  • This post may be a duplicate of https://stackoverflow.com/questions/29986668/flex-wrap-not-working-as-expected-in-safari#30792892 – Carol McKay Nov 01 '18 at 10:22
  • unfortunately no, because this post does not help me. If I use flex: 1 1 auto, the behavior stays the same. – teccrow Nov 01 '18 at 10:30
  • There should be a web inspector available on Safari as well, to help you measure the viewport and see the calculated styles. – DeDee Nov 01 '18 at 10:46
  • Yes, i use the webinspektor. I have the same styles on safari and chrome, but a different view. – teccrow Nov 01 '18 at 10:50

2 Answers2

0
in this row take outer container div place all 3 div in container
<div class="div-container">
</div>

 @media (min-width: 992px) {
      .div-container{
        display: inline-block;
      }
    }
user10105289
  • 32
  • 4
  • 3
    no, because if the browser width larger than 991 pixels already works. The problem is at less than 992 pixels – teccrow Nov 01 '18 at 10:28
  • less than 992 its consider as tablet view screen will shrink col-md-* will not work there col-sm-* series will start they will adjust as screen – user10105289 Nov 01 '18 at 10:55
  • okay, but I have specified the values col-xs-* and these values are inherited on col-sm-* the view on smartphone and tablet to this container it's the same – teccrow Nov 01 '18 at 11:05
0

Try this:

@media (max-width: 991px) {
  .map{
    height: 250px;
    margin-top: 15px;
  }
  .row{
    display: -webkit-flex; #this
    display: flex;
    -webkit-flex-wrap: wrap; #this
    flex-wrap: wrap;
  }
}

For more check this.

Rarblack
  • 4,559
  • 4
  • 22
  • 33