title: How to make a TextArea have a max size and a scroll bar?
body: <p>I have a <code>TextArea</code> that will usually only contain about one line of text. I do, however, want the user to be able to add more than that and have the <code>TextArea</code> expand up to a maximum of about 15 lines, at which point any additional text can be accessed via a scroll bar. I've been able to get the scrolling aspect working by having the <code>TextArea</code> be contained in a <code>Flickable</code> (which is ultimately contained in a <code>Rectangle</code>).</p>
  
  <pre><code>Rectangle {
      id: rec
      width: 200
      height: 25
  
      Flickable {
          id: flickable
          anchors.fill: parent
          contentWidth: textArea.width
          contentHeight: textArea.height
  
          TextArea.flickable:
              TextArea {
              id: textArea
              text: qsTr("Hello, world!")
              wrapMode: Text.WordWrap
          }
          ScrollBar.vertical: ScrollBar { }
      }
  }
  </code></pre>
  
  <p>At this point, how would I go about having the text box expand with the text until some pre-defined max number of pixels (say, 300)?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Alright, almost there, just having one problem with getting the text to center properly with Mitch's solution. My <code>main.qml</code> file contains the following:</p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.3
  
  ApplicationWindow {
      visible: true
      width: 640
      height: 480
      title: qsTr("Hello World")
  
      HelloWorld{
          anchors.centerIn: parent
      }
  }
  </code></pre>
  
  <p>Any my <code>HelloWorld.qml</code> file contains the following:</p>
  
  <pre><code>import QtQuick 2.9
  import QtQuick.Controls 2.2
  import QtQuick.Layouts 1.3
  import QtQuick.Dialogs 1.2
  import QtQuick.Controls.Styles 1.4
  
  ColumnLayout{
  
      width: 250
  
      FontMetrics {
          id: fontMetrics
          font: textArea.font
      }
  
      Flickable {
          id: flickable
          width: parent.width
          height: Math.min(contentHeight, fontMetrics.height * 15)
          contentWidth: width
          contentHeight: textArea.implicitHeight
          clip: true
  
          TextArea.flickable: TextArea {
              id: textArea
              text: "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
                  + "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
              wrapMode: Text.WordWrap
              //padding: 0
  
              background: Rectangle {
                  border.color: "blue"
              }
          }
          ScrollBar.vertical: ScrollBar {}
      }
  
  }
  </code></pre>
  
  <p>This is very close to working, but for one reason or another, when I have this code outside of <code>main.qml</code>, the text gets shifted lower and to the right until the user selects it:</p>
  
  <p><a href="https://i.stack.imgur.com/BHgiV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BHgiV.png" alt="enter image description here"></a></p>
  
  <p>After selecting the text, it looks like this (which is what I want it to start at):
  <a href="https://i.stack.imgur.com/kwSBx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kwSBx.png" alt="enter image description here"></a></p>