4

Given a fixed-size flex container with 2 columns:

  1. A left dynamic content-based width column;
  2. A plain resizable (in both directions) textarea.

I want to control the textarea width, when resized (in both directions) by a user.

How can I enforce container's max-width size to the textarea (without javascript and/or disabling horizontal resize) as if the textarea was a direct child of the container?

The only working CSS-only solution that I've found is display: contents on the .right-content column which unfortunately is not supported by all browsers.

.container {
  max-width: 100px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}

.right-content {
  display: contents;
}
<div class="container">
  <div class="left-content">foo</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Pier-Alexandre Bouchard
  • 5,135
  • 5
  • 37
  • 72

2 Answers2

4

Simply do like below:

.container {
  max-width: 100px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}
.right-content {
  min-width:0; /* this will prevent the element from growing more than the flex container
                  related: https://stackoverflow.com/q/36247140/8620333*/
}

textarea {
  max-width:100%; /* this will prevent the text area from growing more than its parent*/
  display:block;  /* this will remove the whitespace from the bottom*/
  box-sizing:border-box; /* don't forget this*/

  opacity:0.8; /* to illustrate */
}
<div class="container">
  <div class="left-content">foo</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • ho, I never thought that min-width: 0 would help me, thank you! Why is there a downvote on this answer? Is it hacky? – Pier-Alexandre Bouchard Mar 11 '20 at 15:09
  • Textarea seems to still be a bit off when fully extended though. When I inspect in Chrome, I see a width of ~85px on the textarea but ~79px on the right container. I think it's due to the style of the Textarea itself. What do you think? – Pier-Alexandre Bouchard Mar 11 '20 at 15:20
  • @Pier-AlexandreBouchard check the update, forget box-sizing and don't pay attention to the downvote, someone is randomly downvoting many of my posts ;) .. this not hacky in way too – Temani Afif Mar 11 '20 at 15:34
  • Ho wow, thanks! just learned something today regarding min-values/max-values! That means that overflow: hidden on the the right-container also works. Is it more intuitive to set overflow: hidden? – Pier-Alexandre Bouchard Mar 11 '20 at 15:40
  • @Pier-AlexandreBouchard overflow:hidden in this case will do the same thing as min-width (like explained in the question I linked) but min-width is more logical in this case since you don't really want to hide an overflow. You see the difference between both if you have an overflow to hide. – Temani Afif Mar 11 '20 at 15:44
  • Ok I see, I agree. – Pier-Alexandre Bouchard Mar 11 '20 at 15:46
2

Here is a solution that could be a hint for you, but after resizing textarea it's impossible to reduce its height - I'm wondering why

.container {
  max-width: 200px;
  background-color: red;
  display: flex;
}

.left-content {
  background-color: yellow;
}

.right-content textarea {
    resize: vertical;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.right-content {
    flex-grow: 1;
    box-sizing: border-box;
}
<div class="container">
  <div class="left-content">Lorem ipsum dolor amet</div>
  <div class="right-content">
     <textarea>bar</textarea>
  </div>
</div>
Banzay
  • 9,310
  • 2
  • 27
  • 46