Flex container: Is there a way stretch the first item's height when container wraps

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.item {
  height: 100px;
  width: 100px;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

Is there a way to make something like this work when the items wrap? Now item-3 wraps exactly below item-1. I want it to wrap below item-2

Fiddle Link: https://jsfiddle.net/kmajqrsx/

Contents hide

Answers:

Method 1

Method 2

DEMO

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can try achieve this with margin-left: 100px, where 100px is width of the .item and add it to item 3.

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

.flex-container ~ .item {
  margin-left: calc(var(--val) + 2px);
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

The second solution looks almost the same as MaxiGui, but we create a breakpoint with a media query and set min-content as the width.

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

/* 404px is 100px * 2 + 2px lefr-border + 2px right-border */
@media screen and (max-width: 404px) {
  .flex-container {
    width: min-content;
    background-color: aquamarine;
  }
}
.flex-container ~ .item {
  margin-left: auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

Method 2

Add margin-left: auto; to last item:

DEMO

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.item {
  height: 100px;
  width: 100px;
}

.flex-container > .item{
  margin-left:auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating