Line break within flex

Question

I have gone through the answers to inserting line breaks when using flex. However, my situation is a bit different.

I have a left column and a right column. The left column should always be 200px no matter what. The right column needs to contain three columns, then a line break to the next three columns.

As I have already specified flex-wrap: nowrap; this tends to complicate matters.

Any ideas if this is possible? I am sure that it must be but I have been knocking against this without a solution.

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  border: 1px solid green;
}

.rightcol {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid blue;
}

.rightcol div {
  width: 100px;
  margin: 1%;
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="line-break"></div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Does this answer your question? [Flexbox item wrap to a new line](https://stackoverflow.com/questions/45086899/flexbox-item-wrap-to-a-new-line) — Will, Aug 30 '20 at 19:03
That does work well. Alas, the content within each of the divs will be an image. When I add images to the divs then they are not resized properly. ``` — user233111, Aug 31 '20 at 01:18
it's all about specificity here, the width:100% is not being applied . change `.line-break` with `.rightcol div.line-break` and you are good — Temani Afif, Aug 31 '20 at 22:36

smunteanu · Answer 1 · 2020-08-30T19:25:46.710

You need to set the .line-break's height to 1px and also when you select the div elements from .rightcol, don't select the .line-break, but only the div elements containing numbers, like this:

    .flex {
        display: flex;
        flex-wrap: nowrap;
    }
    .line-break {
        width: 100%;
        height: 1px;
    }
    .leftcol {
        width: 200px;
        border: 1px solid green;
    }
     .rightcol {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid blue;
    }
    .rightcol div:not(.line-break) {
        width: 100px;
        margin: 1%;
        border: 1px solid red;
    }

    <div class="flex">
        <div class="leftcol">
            Stuff
        </div>
        <div class="rightcol">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div class="line-break"></div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>

score -1 · Answer 2 · answered Aug 30 '20 at 19:21

The left column should always be 200px no matter what.

So disable flex-shrink on .leftcol.

The right column needs to contain three columns, then a line break to the next three columns.

(I think you mean "a line break to the next row"?)

Use a nested grid on .rightcol.

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  flex-shrink: 0; /* disable flex-shrink */
  /* flex: 0 0 200px; can remove both lines above and use this instead */
  border: 1px solid green;
}

.rightcol {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding: 10px;
  border: 1px solid blue;
}

.rightcol div {
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

dantheman · Answer 3 · 2020-08-30T19:38:47.803

-2

You need to make the line-break class have a higher specificity than the .rightcol div class:

Either:

.line-break {
  width: 100%!important;
}

or:

.rightcol div.line-break {
  width: 100%;
}

will fix the issue

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.rightcol div.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  border: 1px solid green;
}

.rightcol {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid blue;
}

.rightcol div {
  width: 100px;
  margin: 1%;
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="line-break"></div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

edited Aug 30 '20 at 19:38

answered Aug 30 '20 at 19:00

dantheman

3,189
2
10
18

1

The code doesn't work – smunteanu Aug 30 '20 at 19:23
@smunteanu which part doesn't work? – dantheman Aug 30 '20 at 19:31
The line - I tried the code on my computer and the line didn't make any difference. The output was exactly the same. You could set the height to 1px. This would have worked @dantheman93 – smunteanu Aug 30 '20 at 19:37
@smunteanu I've added a code snippet using the code I said. Is the line break working for you now? Making the height 1px does nothing? Your answer uses essentially the same solution. – dantheman Aug 30 '20 at 19:39
oh so the line has to be transparent and you also had to make the div border not select the separating line.. sorry for telling you about the 1px thing - my mistake @dantheman93 – smunteanu Aug 30 '20 at 19:54

Line break within flex

3 Answers3