1

If we open this in genymotion it works fine.

But if we open this is safari ios device mobile the width of the element is wrong(The width of this element having this selector .main-container > .item-1) The width of the flex-container is not equal to sum of child (which is fine in chrome in genymotion).

Same issue is appearing even in the safari browser in many cases.

.main-container {
  display: flex;
  flex-flow: row wrap;
  width: 350px;
  height: 46px;
  border: 1px solid red;
}

.main-container>.item-1 {
  display: flex;
  width: auto;
  flex-flow: column wrap;
  border: 1px solid blue;
}

.main-container>.item-2 {
  display: flex;
  width: auto;
  margin-left: auto!important;
  border: 1px solid green;
}

.header_left {
  display: flex;
  width: auto;
  flex-flow: row wrap;
  border: 2px solid red;
}
<div class="main-container">
  <div class="item-1">
    <div class="simple_list1">
      <div class="header_left">
        <div class="it-1">Predictive analysis</div>
        <div class="it-2">Cool idea</div>
      </div>
    </div>
    <div class="simple_list2">Current Analysis</div>
  </div>
  <div class="item-2">Java</div>
</div>

https://codepen.io/vish123/pen/OgmvWz

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vishal Patil
  • 381
  • 3
  • 15

1 Answers1

0

Try changing flex-flow:column wrap to simply

  flex-direction: column;

to .main-container > .item-1. You don't need wrapping it since it will already position the items below each other due to direction: column.

Ondra Koupil
  • 1,034
  • 6
  • 9
  • yes that is working but i want that gap between the blue line and the green line to be present.After adding your change it is taking full width till it touches the blue line to green line – Vishal Patil Jun 21 '17 at 10:39
  • Ah, I misunderstood what you tried to achieve. I updated the answer. – Ondra Koupil Jun 21 '17 at 11:47