cssflexboxoverflownowrap

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

Take a look at this snippet: Childs are 50% of parent height and the content overflows thank to the childs are inline-block and the parent has white-space: nowrap

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

div.list {
  overflow: auto;
}

div.block-list {
  white-space: nowrap;
}

div.block-list div {
  display: inline-block;
  vertical-align: top;
}

div.list div {
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}
<div class="container">
  <div class="list block-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>

The issue with this implementation is that childs don't have same height. That's why I thought using flex:

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

div.list {
  overflow: auto;
}

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

div.list div {
  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>

Here they all do have same height. But the width is not respected and the problem is that content won't overflow..

Any idea how to achieve it using flex? (or the inline-block solution to have same height)

Solution

  • 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>

    For a more detailed explanation see "The flex-shrink Factor" section in my answer here: