CSS - Divide width to percentage of parent

I have given my divs a min-width.

But if the width increases to more that this then the width should be percentage of the parent container.

I can't for the life of me figure out why I am unable to fix this silly thing.

Any help will be appreciated.

In the fiddle above you can see the wrap's white border extends the width of the window but my divs have a mind of their own.

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
}

.date {
  min-width: 60px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.month {
  min-width: 70px;
  width: 6.25%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.task {
  min-width: 540px;
  width: 67.5%;
  width: auto;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

.status {
  min-width: 100px;
  width: 12.50%;
  float: left;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

Solution

You can do using flex.(hope this is not an issue)

float has become old as of now.

I have moved px to random % for min-width feel free to modify this.

fiddle to playaround.

body {
  background-color: #4efa6d;
}

.wrap {
  width: 100%;
  border: 1px solid white;
  display:flex;
}

.date, .month {
  min-width: 2%;
  width: 6.25%; 
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

.task {
  min-width: 10%;
  width: 67.5%;
  margin: 5px;
 padding:5px; 
  border: 1px solid red;

}

.status {
  min-width: 5%;
  width: 12.5%;
  border: 1px solid red;
  margin: 5px;
  padding:5px;
}

<html>
  <body>
    <div class = "wrap">
      <div class="date">Date</div>
      <div class="month">Month</div>
      <div class="task">Task</div>
      <div class="status">Status</div>
    </div>
  </body>
</html>