1

I have a flex row with two children. Both are flex: 1. The first child is also a flex row with two children, and both are also flex: 1. We'll call the first child of the first child X. When the content of X exceeds half the width of the row, the X expands and makes its parent expand, ultimately taking space from the other elements. The desired behavior instead is for the content to overflow.

[[X][ ]][ ]

Problem

.r {
  display: flex;
}

.container {
  width: 300px;
  height: 50px;
}

.x1 {
  flex: 1 0 0;
}

.of {
  overflow-x: auto;
}

.red {
  background: #f88;
}

.blue {
  background: #88f;
}
<div class='r container'>
  <div class='r red x1'>
    <div class='x1 of'>
      Supercalifragilisticexpialidocious
    </div>
    <div class='x1'>
      Hello
    </div>
  </div>
  <div class='blue x1'>
  </div>
</div>

I've hacked a fix using position: absolute but is there a more elegant solution?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Synchronous
  • 101
  • 9
  • I'm confused which one you wanted to overflow ? and where you want it to overflow ? is wanting to overflow meaning you want the text to go out of the element ? I'm so confused – Rainbow May 02 '18 at 22:06
  • add `min-width: 0` to `.x1` – sol May 02 '18 at 22:07
  • @ZohirSalakCeNa Sorry, was making some edits to the question, so you might've seen some intermediate state. It's correct now. – Synchronous May 02 '18 at 22:10
  • Just add `min-width: 0` to the first child of the primary container (`.red`). https://jsfiddle.net/nan63z6d/9/ – Michael Benjamin May 02 '18 at 22:20

0 Answers0