Prevent Wrapping Lines in Flexbox Child Element

prevent wrapping lines in flexbox child element

The property you are looking for is flex-shrink, not flex-basis.

.no-wrap{
  flex-shrink: 0;
}

Note however, that IE10 is not listed as supporting this property (as it did not exist in the specification at the time they added the Flexbox implementation). You can use the flex property instead.

.no-wrap{
  flex: 0 0 auto; 
}

prevent line wrap between certain flex child elements

Treat every pair of elements—(A,B), (C,D), (E,F)—as a separate flex item to ensure they wrap into flex lines together. Or use grid layout for a simpler solution.

Flexbox solution

Every time you resize the flex container, the flex container will try to figure out how many flex items can fit into any given line. Each element (A, B, C, etc.) is evaluated separately for this purpose, which means that one element in a pair might fit into a flex line, and the other may wrap into the next line.

To ensure these pairs wrap together, you could wrap each pair into another element. That way your flex container doesn’t see individual elements as flex items anymore (A, B, C, D, and so on). Instead, it will see pairs as flex items (AB, CD, EF). Then each pair element can be a flex container itself to make sure the elements inside are laid out horizontally.

<div style="resize: horizontal; overflow: hidden; border: 10px solid black">
  <div style="display: flex; flex-wrap: wrap">
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">A</div>
      <div style="width: 20px; border: 10px solid #373">B</div>
    </div>
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">C</div>
      <div style="width: 20px; border: 10px solid #373">D</div>
    </div>
    <div class="flex-item" style="flex: none; display: flex">
      <div style="width: 100px; border: 10px solid #f77">E</div>
      <div style="width: 20px; border: 10px solid #373">F</div>
    </div>
  </div>
</div>

Prevent wrapping in CSS Flexbox

When it comes to Flexbox, you need to set min-width: 0 or overflow: hidden to every level, down from the child of the element with the width constraint, to the one having ellipsis.

So in this case, from the sidebar's child, and the reason is that a flex item's min-width defaults to auto, which mean it can't be smaller than its content.

To make it easy to follow how I mean, I created a flex-ellipsis class and added it to all elements down that chain.

Note, I also removed the negative margin, margin: 0 -1rem;, from the row class, or else one can't see the ellipsis.

Updated fiddle

Stack snippet

const resizeHandle = document.getElementsByClassName("vertical-resize")[0];const navbar = document.getElementById('sidebar');
function resizeNavbar(e) {  let size = (e.pageX + 5);
  navbar.style.width = (e.pageX + 5) + "px";}
function removeEvents() {  document.removeEventListener('mousemove', resizeNavbar);  document.removeEventListener('mouseup', resizeNavbar);}
resizeHandle.addEventListener('mousedown', () => {  document.addEventListener('mousemove', resizeNavbar);  document.addEventListener('mouseup', removeEvents);});

* {  user-select: none;  color: #dadada;}
.flex-ellipsis {  min-width: 0;                          /*  added  */  /* or overflow: hidden; */}
p,h6 {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}
.rounded-circle {  border-radius: 50% !important;}
.no-margin {  margin: 0 !important;}
.column {  flex-basis: 0;  max-width: 100%;  flex-grow: 1;  background: #4a4a4a;}
.column-1 {  flex: 0 0 8.33333%;  max-width: 8.33333%;}
.row {  display: flex;  flex-wrap: nowrap; /*Even though no-wrap it still wraps as shown in picture.*/  /*margin: 0 -1rem;*/}
.custom {  margin: auto;  padding: 10px 0px;  flex-wrap: nowrap;}
.vertical-resize {  position: relative;  right: 0;  top: 0;  cursor: col-resize;  width: 5px;  background: aquamarine;  height: 100vh;}

<div class="row">  <div id="sidebar" style="width: 570px;">    <div class="align-items-center row custom flex-ellipsis" id="sidebar">      <div style="max-width: 2.5rem;" class="column-1">        <img class="rounded-circle" style="max-width: 28px; min-width: 28px;" alt="Avatar" src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png">      </div>      <div class="column flex-ellipsis">        <div class="row">          <div class="column">            <p class="no-margin">Ahmed Tarek</p>          </div>        </div>        <div class="row flex-ellipsis">          <div class="column flex-ellipsis">            <h6 style="font-size: 11px;" class="no-margin">01 January, 0001</h6>          </div>        </div>      </div>    </div>  </div>  <div class="vertical-resize"></div>  <div class="column">
  </div></div>

How to prevent flex-items from overflowing flex parent with no wrap?

Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}

How to prevent DIV wrapping on the second row?

You can change in your parent container flex-wrap: nowrap; And the item width you can change to 100%;

.parent{
  border: solid green 1px;
  display: flex;
  flex-wrap: nowrap;
  width: 1000px;
  height: 100px;
  gap: 20px;  
  box-sizing: border-box;
}
.child{
  width: 100%;
  border: solid blue 1px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

flexbox prevent wrapping of rows

If you have 2 or maximum 3 rows, you can use pseudo :before and/or :after to force new lines. flex:1; should evenly dispatch the children on each rows. You can also use a min-width to easily add a transition.

This technic allows you to draw 3 rows without extra markup. to draw more rows, use a new container or insert elements to break the lines the same way the pseudo does.

example with 2 rows

section {display:flex;flex-wrap:wrap;}div {  flex:1;  min-width:calc(16.66% - 2px);  transition:0.5s;   margin:auto;  height: 40px;  background-color: #f00;  margin: 1px;  -webkit-transition: 0.15s;  transition: width 0.15s;  order:0;}div:nth-child(4)~div {/* every div starting from the fith */  order:2;}section:before{  content:'';  width:100%; /* fill a whole row */  order:1;/* comes before the fith div*/ }div:focus {/* css demo purpose instead js onclick event */  min-width:calc(50% - 2px);  transition:0.5s;   background-color:yellow}

div {display:flex;align-items:center;justify-content:center;}section {counter-reset: div}section div:before {counter-increment:div;content:'DIV N°: 'counter(div);}

<section>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div>  <div tabindex="0"></div></section>

---

Related Topics