0

I am working on some UI fix where I want to fix a design to work properly in IE web browser. Given design has used calc css to define flex value:

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.list-item {
  margin-bottom: 18px;
  border: solid 1px brown;
  -webkit-box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
  box-shadow: 0px 0px 14px 3px rgba(247, 248, 252, 0.7);
  background-color: pink;
  padding: 16px 16px 12px 16px;
  border: solid 1px #f7f8fc;
  color: brown
}

.list-item-background {
  position: relative;
  background-color: black;
}

.personal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-right: solid 1px #e3e7ec;
  margin-right: 16px;
}

.col-md-5 {
  flex: 0 0 calc( 62.5% - 3rem);
  margin-left: 1.5rem;
  max-width: calc( 62.5% - 3rem);
}

.data {
  margin-left: 0rem;
  margin-top: 11px;
}

.col-md-3 {
  flex: 0 0 calc( 37.5% - 3rem);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  max-width: calc( 37.5% - 3rem);
}
<div class="list">
  <div class="list-item-background">
    <div class="list-item">
      <div class="row">
        <div class="col-md-5 col-sm-8 col-xs-4 personal">
          <div class="avatar">
            My image and details
          </div>
        </div>
        <div class="col-md-3 col-sm-8 col-xs-4 data">
          <div class="Call">
            call button
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have never used calc to define width so I am unable to understand howcome the previous developer has calculate this % and rem value and how I can fix this for IE?

Please find code sample at:

jsfiddle link

Thanks.

Always_a_learner
  • 4,585
  • 13
  • 63
  • 112
  • 1
    Why not just use padding (with box-sizing) instead of margin and then you won't need the calc – Pete Sep 06 '18 at 09:55
  • @Pete Thanks. I have updated my post as it was not clear enough what I am trying to ask. Can you please elaborate that how padding would help to fix this problem and how calc was calculated in given code as I am not author of this code and want to understand how it is being implemented. – Always_a_learner Sep 06 '18 at 09:59
  • 1
    Possible duplicate of [multiline-flexbox in IE11 calculating widths incorrectly?](https://stackoverflow.com/questions/21942183/multiline-flexbox-in-ie11-calculating-widths-incorrectly) – Gerard Sep 06 '18 at 10:19
  • 2
    if you use padding and box sizing instead of margin, you will have your gaps but the padding will be included with the width, therefore you will not need your calc – Pete Sep 06 '18 at 10:20
  • @Gerard and Thanks for reference. I am trying to understand that solution, will update post after that. Can you also pls tell me about how did some one has calculated the width to be calc(62.5%-3rem). how did some developer estimated this? I can understand 62.5% logic but how to calculate about subtracting 3rem? – Always_a_learner Sep 06 '18 at 10:35
  • @Pete Thanks I am not an expert in CSS so I didn't know about this. Thanks will understand this and update my post. – Always_a_learner Sep 06 '18 at 10:36
  • 1
    The 3rem is to cater for the margins (1.5 left and 1.5 right) – Pete Sep 06 '18 at 10:37
  • @Pete Thanks again! – Always_a_learner Sep 06 '18 at 10:39
  • You may want to check why they have added those widths as it looks like it is using some sort of grid library like bootstrap and they have also set the widths using the grid classes (eg col-md-3) - seems a bit daft that they use the grid classes only to override them all – Pete Sep 06 '18 at 10:43

0 Answers0