display flex - keeping last element in full width - html

Question

I am trying to keep my 3d element with full width of the flex container. but not getting the reuslt. any one suggest me the right way for ie11 here?
.parent{
border:1px solid red;
display:flex;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
/* not working */
width:100%;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>

Answer 1

To enable for the last child to wrap and be 100% wide, add flex-wrap: wrap to parent and use flex-basis on last child.
.parent{
border:1px solid red;
display:flex;
flex-wrap: wrap;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
flex-basis: 100%;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>

Answer 2

To make the last child 100%-width only after wrapping...
Use flex: 1:
The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.
.parent{
border:1px solid red;
display:flex;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
width:100%;
/* SOLUTION */
flex: 1;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>