CODEWITHSUNDEEP
htmlcssflexbox
user2024080
user2024080

Reputation: 5101

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>

Upvotes: 13

Views: 30780

Answers (2)

Huso
Huso

Reputation: 1486

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>

Upvotes: 4

Asons
Asons

Reputation: 87313

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>

Upvotes: 24

Related Questions