White-Space: Nowrap; and Flexbox Did Not Work in Chrome

white-space: nowrap; and flexbox did not work in chrome

Reference - https://drafts.csswg.org/css-flexbox-1/#min-size-auto

The initial setting on flex items is min-width: auto. So, in order for
each item to stay within the container, we need to give min-width: 0.

Add min-width: 0;. This is the easy workaround in your case.

that is

name {
  display: flex;
  min-width: 0;
}

Snippet

.container {  width: 800px;  height: 80px;  display: flex;  border: solid 1px black;  margin: 10px;}.name {  display: flex;  min-width: 0;}.firstname {  width: 100px;  background-color: grey;}.lastname {  flex-grow: 1;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;  display: flex;}.side {  flex-grow: 0;}.side, .firstname, .lastname {  align-self: center;  padding: 0 20px;}

<h1>problem</h1><div class="container">  <div class="name">    <div class="firstname">      test    </div>    <div class="lastname">      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a    </div>  </div>    <div class="side">    options  </div></div>
<h1>expected result</h1>
<div class="container">  <div class="name">    <div class="firstname">      test    </div>    <div class="lastname">      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad...    </div>  </div>    <div class="side">    options  </div></div>

flex and white-space: nowrap; child won't respect width

You need to disable flex-shrink.

Add this to your code:

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

A flex default setting is flex-shrink: 1, which causes items to shrink so that they don't overflow the container. If you want items to keep their defined width / height, then disable that setting.

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.flex-list {
  display: flex;
  white-space: nowrap;
}

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

<div class="container">
  <div class="list flex-list">
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
  </div>
</div>

white-space: nowrap breaks flexbox layout

This is caused by the default flex-box behaviour, which prevents flex-boxes of becoming smaller than it's contents.

The solution to this issue is setting min-width: 0 (or min-height: 0 for columns) to all parent flex-boxes.
In this specific case (and in the fiddle):

#shell{
  flex: 1 1 auto;
  display:flex;
  flex-flow:row nowrap;
  position:relative;
  width:100%;
  min-height:100%;
  min-width: 0; /* this one right here does it!*/
} 

---

$('#nav-toggle').on('click',function(){ $(this).parent().toggleClass('collapsed');});$('#help-toggle').on('click',function(){ $('#help-pane').toggleClass('visible');});$('#list-toggle').on('click',function(){ $('#list').toggleClass('nowrap');});

body,html{width:100%;height:100%;overflow:hidden;}
#body{  display:flex;  flex-flow:row nowrap;  position:absolute;  top:0;  left:0;  margin:0;  padding:0;  width:100%;  height:100%;  background-color:#abc;  overflow:hidden;}
#shell{  flex: 1 1 auto;  display:flex;  flex-flow:row nowrap;  position:relative;  width:100%;  min-height:100%;  min-width: 0;}
  #left{    flex: 0 0 180px;    min-height:100%;    min-width: 0;    background:lightblue;  }  #left.collapsed{    flex: 0 0 80px;  }    #mid{    flex: 1 1 auto;    min-height:100%;    min-width: 0;    display:flex;    flex-flow:column nowrap;    align-items:stretch;    align-content:stretch;    position:relative;    width:100%;    min-height:100vh;    min-width: 0;    background:purple;  }      #mid-top{        flex: 0 0 auto;        min-height:100px;        background:green;      }      #mid-bottom{        min-height:calc(100% - 100px);        flex: 1 1 auto;        background:lightgreen;      }      #list{        overflow: auto;        width: 100%;        max-width: 100%;      }      #list.nowrap{        white-space: nowrap;      }      #secondlist{        overflow: auto;        max-width: 250px;        white-space: nowrap;      }      .list-item{        display: inline-block;        width: 50px;        height: 50px;        margin: 2px;        background: purple;      }      .list-item.odd{        background: violet;      }      #help-pane{  display:none;  flex: 0 0 0px;  background:red;}#help-pane.visible{  display:inherit;  flex:0 0 180px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="body"> <div id="shell">      <div id="left">          <div id="nav">            - menu -          </div>          <div id="help-toggle">            help toggle          </div>          <div id="nav-toggle">            nav toggle          </div>          <div id="list-toggle">            list whitespace toggle          </div>      </div>      <div id="mid">          <div id="mid-top">                - mid top -          </div>          <div id="mid-bottom">               - mid bottom- <br><br>               <div id="list">                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>               </div>               <hr>               <div id="secondlist">                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>                 <div class="list-item"> </div>                 <div class="list-item odd"> </div>               </div>          </div>      </div> </div> <div id="help-pane" class="visible">   - help-pane - </div></div>

Firefox and flexbox - When using white-space: nowrap on child element the flexible box breaks

That's how it's supposed to work. Flexbox distributes the left over space after the intrinsic width of the elements has been calculated, it does not control the intrinsic width of the elements themselves. This is why the results are unintuitive if you don't set explicit widths on things, though the working group is reviewing the spec.

My advice would be to try using display: table; instead, though you may encounter some similar issues.

Firefox text-overflow with nowrap ignored (Chrome works)

The problem is that the Flexible Box Layout introduces the Implied Minimum Size of Flex Items:

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value
of the min-width and min-height properties defined in
CSS 2.1.

That auto value computes to 0, except

on a flex item whose overflow is visible in the main
axis, when specified on the flex item’s main-axis min-size
property

In your case, the main axis is the horizontal one. Therefore, if you set overflow-x to anything but visible, min-width will compute to 0, which was the initial value before auto was introduced.

For example,

.wrapper {
    overflow: hidden;
}

.container {  position: absolute;  width: 150px;}.innercontainer {  position: relative;  padding-right: 25px;  margin-bottom: 10px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}.outerwrapper {  display: block;  height: 24px;  text-align: center;  font-size: 10px;  line-height: 24px;  margin-bottom: 5px;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  box-orient: horizontal;  -webkit-box-orient: horizontal;  flex-direction: normal;  -ms-flex-direction: normal;  -moz-flex-direction: normal;  -webkit-flex-direction: normal;}.wrapper {  flex: 1;  -ms-flex: 1 0 auto;  -moz-flex: 1;  -webkit-flex: 1;  -webkit-box-flex: 1;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  box-orient: horizontal;  -webkit-box-orient: horizontal;  flex-direction: normal;  -ms-flex-direction: normal;  -moz-flex-direction: normal;  -webkit-flex-direction: normal;  background-color: grey;  overflow: hidden;}.wrapper span {  display: block;  flex: 1;  -ms-flex: 1;  -moz-flex: 1;  -webkit-flex: 1;  -webkit-box-flex: 1;  text-align: left;  font-size: 10px;  padding: 0 5px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  color: #FFFFFF;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

<div class="container">  <div class="innercontainer">    <section class="outerwrapper">      <div class="wrapper">        <span>          super long string in here super long string          in here super long string in here        </span>      </div>    </section>  </div></div>

`white-space: nowrap` inside flex container only grows to width of text as if it were wrapped

I tried within the codepen you provided and ended up preppending the following, not sure if it's what you meant/wanted:

HTML

<div class="grid">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

CSS

.grid {
  /* choose one of these below depending whether you want it (the parent) take the full width */
  display: inline-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* choose one of these below depending whether you want it overflowing horizontally */
  width: fit-content;
  width: max-content;
}

The full demo:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
}

.parent {
  display: inline-flex;
  margin-bottom: 60px;
  width: max-content;
}

.child {
  flex: 1 0 0px;
  padding: 20px;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  background-color: #89e7dc;
}

.right {
  background-color: #e7cc89;
}

<h2>Answer</h2>

<div class="grid">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<h2>Question</h2>

<p>In the first example, when the text is allowed to wrap, we see that the two sides grow correctly to the same width as the larger text</p>
<div class="parent">
  <div class="child left">This is some short text</div>
  <div class="child right">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>In the second example, where the text is forced onto a single line by
  <pre>white-space: nowrap; overflow: hidden;</pre> we see that the boundaries grow to the size that the wrapped text would occupy, even though it's all on one line.</p>
<div class="parent">
  <div class="child left nowrap">This is some short text</div>
  <div class="child right nowrap">This is some long text that is intended to cause the previous child to grow to the width of this one</div>
</div>

<p>
  How can we get the same behaviour as the first example (both sides growing to exactly the size of the larger content) while keeping the text on the same line?
</p>

display:flex not working in Chrome

Change your .row to:

.row {
    display: inline-flex;
    width: 100%;
}

You may also want to report this bug to team behind Chrome.

White-space: pre-wrap messes up flexbox layout in IE11

Ok, of course I figured it out just after asking...

It looks like it was as simple as moving the white-space property from outer div to the inner elements, as the extra spacing was caused by line breaks in code between different div elements. For some reason IE factors these line breaks in whereas other browsers don't.

I'll update the Pen and code accordingly, maybe this is helpful for someone else..

---

Related Topics