CODEWITHSUNDEEP
htmlcss
Michael Munta
Michael Munta

Reputation: 247

Flexbox keep wrapping point while increasing item width

First of all, here is a codepen with the issue I am trying to solve.

This is a simplified version of the problem I have on an actual project. My goal is to keep the grid in the same format with 5 columns and to be able to increase the width of these cells so the content is always visible, but also so that it doesn't wrap before the first row of 5 columns is displayed. Whenever I try to increase the width of the cells the grid wraps and I lose the structure I want.

So, basically, increase width of items, but prevent wrapping, is it possible? It is fine if the content overflows the flex container itself, the goal is to add overflow-x to this grid.

.flex-container {
  border: 1px solid silver;
  display: flex;
  width: 50%;
}

.wrap {
  flex-wrap: wrap;
}

.wrap div {
  background: gold;
}

.flex-item {
  width: 160px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  line-height: 100px;
  color: black;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<div class="flex-container wrap">
  <div class="flex-item">11111111111111</div>
  <div class="flex-item">22222222222222</div>
  <div class="flex-item">33333333333333</div>
  <div class="flex-item">44444444444444</div>
  <div class="flex-item">55555555555555</div>
  <div class="flex-item">66666666666666</div>
  <div class="flex-item">77777777777777</div>
  <div class="flex-item">88888888888888</div>
  <div class="flex-item">99999999999999</div>
  <div class="flex-item">00000000000000</div>
</div>

Upvotes: 0

Views: 51

Answers (3)

Harshal
Harshal

Reputation: 339

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color:red;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
   word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="flex-container">
  <div>11111111111111</div>
  <div>22222222222222</div>
  <div>33333333333333</div>
  <div>44444444444444</div>
  <div>55555555555555</div>
  <div>66666666666666</div>
  <div>77777777777777</div>
  <div>88888888888888</div>
  <div>99999999999999</div>
  <div>00000000000000</div>
   
</div>


</body>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

From the comments, it does look like grid is the option you need, it won't allow content to be wrapping and justify content will stick it on the side if shorter thant the width of the container.

here is the snippet with grid:

/* flex turned into grid */
.flex-container {
  border: 1px solid silver;
              display: grid;
              grid-template-columns:repeat(5,auto);
              justify-content:start;
  overflow:auto;
  width: 80%;
  
}

.wrap {

}

.wrap div {
  background: gold;
}

.flex-item {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  line-height: 100px;
  color: black;
  font-weight: bold;
  font-size: 2em;
  text-align: center; 
}
<div class="flex-container wrap">
  <div class="flex-item">11111111111111</div>
  <div class="flex-item">22222222222222</div>
  <div class="flex-item">33333333333333</div>
  <div class="flex-item">44444444444444</div>
  <div class="flex-item">55555555555555</div>
  <div class="flex-item">66666666666666</div>
  <div class="flex-item">77777777777777</div>
  <div class="flex-item">88888888888888</div>
  <div class="flex-item">99999999999999</div>
  <div class="flex-item">00000000000000</div>
</div>

Upvotes: 2

Alexander Nied
Alexander Nied

Reputation: 13623

I think, if it is allowable, that css grid may be a better candidate for the layout you are proposing...

.grid-container {
  border: 1px solid silver;
  display: grid;
  width: 50%;
  grid-template-columns: 20% 20% 20% 20% 20%; /* hard set five columns and no more */
}

.grid-container div {
  background: gold;
}

.grid-item {
  /* width: 160px; */
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  line-height: 100px;
  color: black;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  overflow-x: hidden; /* overflow-x to hide overflow as discussed in question */
}
<div class="grid-container">
  <div class="grid-item">11111111111111</div>
  <div class="grid-item">22222222222222</div>
  <div class="grid-item">33333333333333</div>
  <div class="grid-item">44444444444444</div>
  <div class="grid-item">55555555555555</div>
  <div class="grid-item">66666666666666</div>
  <div class="grid-item">77777777777777</div>
  <div class="grid-item">88888888888888</div>
  <div class="grid-item">99999999999999</div>
  <div class="grid-item">00000000000000</div>
</div>

Upvotes: 1

Related Questions