0

My page has two divs: one is on the left side of the page and contains a nav, which is resizable horizontally via JavaScript. The other div is on the right side of the page and contains the page's content (the content can contain many items, including items that are themselves flexboxes).

The problem is the left side panel is only allowing me to resize up to so far, then it stops as if it hit a wall. It is the flex items on the right that is preventing me from expanding further.

http://codepen.io/anon/pen/GWWLRK

How can I get the left to resize as far as the user desires?

Thank you.

<div class="page">
  <div class="container">
    <div class="nav">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
      </ul>
      <div class="nav-resize-bar"></div>
    </div>
    <div class="right">
      page's content goes over here.  it could contain anything, including flexible items:
      <div class="flex-parent">
        <div>Drag the black bar to see that you can only make the yellow section so big - it then gets stopped by these flex items.</div>
        <div>efgh efgh efgh</div>
        <div>ijkl ijkl ijkl ijkl</div>
        <div>mnop mnop</div>
      </div>
    </div>
  </div>
</div>
Alan P.
  • 2,898
  • 6
  • 28
  • 52
  • 1
    Add `min-width: 0` to `.right` – Michael Benjamin Mar 10 '17 at 20:58
  • Ah thank you Michael! I had tried adding it to `.flex-parent` and `.flex-parent div` but that wasnt working. – Alan P. Mar 10 '17 at 21:26
  • `.right` is the flex item that needs to shrink. That's why `min-width` goes there. `.flex-parent` is nested in `.right` (and is not a flex item) so the override wouldn't apply. – Michael Benjamin Mar 10 '17 at 21:32
  • Yes `.right` is a flex item (of `.container`), but `.flex-parent div` are flex items too (of `.flex-parent`). – Alan P. Mar 10 '17 at 21:37
  • Understood. But your question is about how to shrink `.right`, not its descendants. Of course, if `.right` would shrink, but then get stopped by a descendant flex item, you would apply the override there, as well. – Michael Benjamin Mar 10 '17 at 21:39
  • FYI, as detailed in the duplicate, instead of `min-width: 0` you can use `overflow: hidden`. That would allow `.right` to shrink *and* hide the overflowing text. – Michael Benjamin Mar 10 '17 at 21:42

0 Answers0