title: How to prevent Overflow Horizontally?
body: <p>I am struggling to make this work but I tried everything and still, I can't make this work. So, I have the structure below:</p>
  
  <pre><code>Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: &lt;Widget&gt;[
        CircleAvatar(
          radius: 40.0,
          backgroundImage: Image
              .network(
            '$thumbnail',
            fit: BoxFit.cover,
          )
              .image,
        ),
        SizedBox(
          width: 20,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: &lt;Widget&gt;[
            Text(
              'Really biiiig drink name here',
              style: TextStyle(
                color: Colors.white,
                fontSize: 28
              ),
            ),
            Text(
              'Category goes here',
              style: TextStyle(
                color: Colors.white.withOpacity(.8)
              ),
            ),
          ],
        ),
      ],
    ),
  </code></pre>
  
  <p>And it renders like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LJ30b.png" rel="nofollow noreferrer">overflow</a></p>
  
  <p>How can I clip, or wrap that title text without defining a fixed width to a parent widget?</p>