1

I'm using max-width: 100% to contain textarea. But it doesn't seem to work inside a flex item. Is there a property I can specify on textarea to ensure that the max will be respected?

textarea {
  display: block;
  margin-bottom: 1em;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

See codepen. Flex classes from from flexboxes.

ryanve
  • 50,076
  • 30
  • 102
  • 137
  • 1
    A flex item, by default, cannot be shorter than the width of its content. An initial setting on flex items is `min-width: auto`. Therefore, your `textarea` with 4000 columns is expanding the flex item. Override the default. Add `min-width: 0` to the item. [**revised codepen**](https://codepen.io/anon/pen/zEPQWY) – Michael Benjamin Oct 04 '17 at 22:27
  • Doing `.flex-initial {max-width: 100%;}` solves the issue as well. – Jonathan Oct 04 '17 at 22:49

1 Answers1

0

You specify that the text area should be 4,000 columns wide in the codepen, which is what's causing the issue.

Since the parent is a flex container, it will grow to accommodate the children elements.

Easiest fixes are to:

  • set a max width in px, vw, or another appropriate unit for your textarea.
  • use width instead of max-width, and specify a max-width on the parent container, instead
  • override the default min-width: auto of the parent element, setting it to any other value, i.e. 0, or 250
  • reduce the columns to something more reasonable, like 250 - or omit them and use width instead
Bricky
  • 2,572
  • 14
  • 30