display flex - keeping last element in full width

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>

score 21 · Accepted Answer · answered Oct 31 '17 at 08:47

21

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>

answered Oct 31 '17 at 08:47

Asons

84,923
12
110
165

To be clear, this makes the last child _always_ 100% width. – Kalnode Mar 28 '21 at 17:36
@MarsAndBack -- Yes, and that is what OP asked for. There are other solutions if one doesn't want that. Here's one that works different: https://stackoverflow.com/a/48225892/2827823 – Asons Mar 28 '21 at 18:36

score 3 · Answer 2 · edited Mar 28 '21 at 17:32

3

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>

edited Mar 28 '21 at 17:32

Kalnode

9,386
3
34
62

answered Oct 31 '17 at 08:27

Huso

1,501
9
14

This solution works nicely if you want 100% width only when items wrap. – Kalnode Mar 28 '21 at 17:37
@MarsAndBack -- It would work if they will wrap, which these flex items never will, unless one tell them to, using e.g. `flex-wrap: wrap;` – Asons Apr 08 '21 at 10:30

display flex - keeping last element in full width

2 Answers2