Html - How to make a Flexbox item the same width as other items but on a new line

Marius
August 1, 2023
192 views
1 vote
2 Answers

I want to set a Flexbox item the same width as the width of two Flexbox items combined. For example:

.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

.line-break {
  flex-basis: 100%;
}

.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.item-2 {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.item-3 {
  border: 1px solid black;
}

<div class="body">
  <div class="item-1">
  </div>
  <div class="item-2">
    <p>This is a text</P>
  </div>
  <div class="line-break" />
  <div class="item-3">
    <p>This is another text</p>
  </div>
</div>

A side note: I’m using the React framework for my project.

How would I calculate the width for item-3 so it would have the same width as item-1 + gap + item_2 dynamically?

https://codepen.io/InFusion-the-sans/pen/wvQRRxK

I’ve tried to set the flex-basis property on item-3 to some percentage but the result is too far off the expected width I wanted.

Answers

You need to use flex-grow: 1 to the item-2 so that it cover’s the remaining available width of that row. width: auto doesn’t do that 🙂

.item-2 {
    flex-grow: 1;
}

.body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}

.line-break {
    flex-basis: 100%;
}

.item-1 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

.item-2 {
    /* width: auto; */
    height: auto;
    border: 1px solid black;
    flex-grow: 1;
}

.item-3 {
    border: 1px solid black;
}

<div class="body">
    <div class="item-1">
    </div>
    <div class="item-2">
        <p>This is a text</P>
    </div>
    <div class="line-break">

    <div class="item-3">
        <p>This is another text</p>
    </div>
</div>

You can add an extra wrapper like so:

.body {
  display: inline-flex;
  flex-direction: column;
  gap: 2rem; /*this is the line break,   <div class="line-break" /> does nothing, since it doesn't have height*/
}

.top-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.item-2 {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.item-3 {
  align-self: stretch;
  border: 1px solid black;
}

<div class="body">
  <div class="top-wrapper">
    <div class="item-1">
    </div>
    <div class="item-2">
      <p>This is a text</P>
    </div>
  </div>
  <div class="item-3">
    <p>This is another text</p>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a Flexbox item the same width as other items but on a new line

Answers