htmlcssflexbox

display flex - keeping last element in full width

I am trying to keep my 3d element with full width of the flex container. But not getting the result.
Can anyone 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>

Solution

  • 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>

    Here's sample using the built in pseudo class :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-child{
  flex-basis: 100%;
}
    <div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child">three</div>
</div>