Expanding the last row to ensure its proper width with flex-grow

Question

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ideal. Any suggestions on how to fix this would be greatly appreciated!

Current layout: https://i.sstatic.net/JTPVd.png

Desired layout: https://i.sstatic.net/UGtjQ.png

View the CodePen demo here - https://codepen.io/matt-priestley/pen/ZmXqzr

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes&"gt;</li>
  <li class="boxes"></li>
  <li class="boxes"gt;</li>
</ul>

html css responsive-design flexbox flex-grow

Answer 1

Answer №1

Get rid of the line flex-grow: 3; in the .boxes class

Check out the revised code snippet below:

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  /*flex-grow: 3;*/ removed
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Answer 2

Get rid of the line flex-grow: 3; in the .boxes class

Check out the revised code snippet below:

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  /*flex-grow: 3;*/ removed
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Answer 3

Answer №2

I made a quick adjustment by changing flex-grow to auto in the code snippet below, and it appears to be functioning correctly now. Alternatively, you could remove it altogether since it's not needed in this scenario.

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-grow: auto;
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

On a side note, I took the initiative to address the borders overlapping issue. Here's how you can do that:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
}

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

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-basis: 33.3%;
  min-width: 200px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.boxes:nth-of-type(3n+1) {
  border-left: 2px solid black;
}

.boxes:nth-of-type(-n+3) {
  border-top: 2px solid black;
}

I hope these tweaks prove to be helpful!

Answer 4

I made a quick adjustment by changing flex-grow to auto in the code snippet below, and it appears to be functioning correctly now. Alternatively, you could remove it altogether since it's not needed in this scenario.

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-grow: auto;
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

On a side note, I took the initiative to address the borders overlapping issue. Here's how you can do that:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
}

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

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-basis: 33.3%;
  min-width: 200px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.boxes:nth-of-type(3n+1) {
  border-left: 2px solid black;
}

.boxes:nth-of-type(-n+3) {
  border-top: 2px solid black;
}

I hope these tweaks prove to be helpful!

Answer 5

Answer №3

To achieve a wrapping effect, use the flex-wrap:wrap property and set the width of each box to 33% - (margin_size)

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

.boxes{
  width: calc(33% - 20px);
  height: 180px;
  background-color: #3C79D1;
  border: 2px solid #003C92;
  margin: 10px;
  box-sizing: border-box;
}

li{
  list-style-type: none;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Answer 6

To achieve a wrapping effect, use the flex-wrap:wrap property and set the width of each box to 33% - (margin_size)

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

.boxes{
  width: calc(33% - 20px);
  height: 180px;
  background-color: #3C79D1;
  border: 2px solid #003C92;
  margin: 10px;
  box-sizing: border-box;
}

li{
  list-style-type: none;
}

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

Expanding the last row to ensure its proper width with flex-grow

Answer №1

Answer №2

Answer №3

Similar questions

Matching utility types and themes in Tailwind CSS

Minimize all the open child windows from the main Parent window

The hidden visibility feature only activates when the mouse is in motion

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

How to send information to a modal component in ReactJS?

Map region indicator tooltip

Issues with DnD functionality in Chrome, images not visible during dragging operation

Hide the element once the CSS animation has finished

Stop unauthorized pages from hijacking login cookies

Is it possible to animate the change in background color dynamically using jQuery?

Issues with implementing a Bootstrap dropdown list in a Django HTML template

Tips for resizing a Shiny Dashboard to accommodate various screens

The z-index property in CSS is not functioning as expected when used with an absolute div inside a

Persistent change issue with JQuery CSS function

insert a gap between two elements in the identical line

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

Show items in the sequence of clicking

Emphasizing Text Within Div Element

Switching HTML text by clicking or tapping on it

The particular division is failing to display in its designated location