title: Instruct the browser to prefer breaking over increasing parent's width
body: <p>I have a layout with a menu column which is allowed to stretch between two widths by <code>min-width</code>  and <code>max-width</code>:</p>
  
  <pre><code>#menu {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 350px;
  }
  </code></pre>
  
  <p>There are link placed to this container programatically, which can cause it to grow if their text is too long or stay at the <code>min-width</code> if it isn't. If the text of any one link is too long, the menu will stay at <code>350px</code> and the links text will instead break.</p>
  
  <p>This is all fine. There is also a paragraph following the links with static text in it. The text always works out to be so long it stretches the container to its maximal width and then starts breaking lines.</p>
  
  <p>I am curious if I can instruct the CSS layout engine to make this paragraph break ASAP instead of contributing to the width of it.</p>
  
  <p>This way the links would cause the container to stay shrunk or grow to its allowed extent as needed, but the paragraph would only ever span to the effective width of the menu and then start breaking lines, never pushing the menu to grow wider, only the links could.</p>
  
  <p>I am struggling to come up with any CSS property that would affect this and I did think about wrapping up the paragraph in a wrapper <code>div</code> figuring I would  first have the wrapper <code>div</code> be laid out, then its children which would span its entire width, but I would still need to come up with a way to make the wrapper div span the effective with of the menu container without actually pushing it further.</p>
  
  <p>Is there a way to have an element which behaves like a block in that it spans the parent's width but doesn't cause the parent to grow if its contents' width is greater than the one of the parent at the same time?</p>