How to force flex columns to stay on the same line if container 'flex-wrap' is set to 'wrap'

Question

I'm trying to create the layout with one row and two columns inside one flex container. Here is the code http://jsfiddle.net/73574emn/1/ .

What I want is to make the row always stay above columns and both columns to stay on the same line. Obviously, now if I make the window too small then column3 will move down under the column2 because flex-wrap property is set to wrap (because I need row and columns to be on separate lines).

I suppose that I can wrap row in one flex container and both columns in another, but I want to know if there are any ways to do it while they are in the same container, and if yes then how it works. Maybe I can do something with width or min-width?

*
{
    box-sizing: border-box;
}

.flex
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row {
  background-color: green;
  flex: 0 1 100%;
}

.column1 {
  background-color: red;
  flex: 1 0 50%;
  text-align: center;
  padding: 10px;
}

.column2 {
  background-color: yellow;
  flex: 1 0 50%;
  text-align: center;
  padding: 10px;
}

<div class="flex">
    <div class='row'>Hithis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column1'>Hellothis is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
    <div class='column2'>Hello 2this is a long test sentence this is a long test sentence this is a long test sentence this is a long test sentence </div>
</div>

Answer 1

A flex item's min-width defaults to auto, and as such it will not allow the element to be smaller than its content.

Add overflow: hidden to the side-by-side columns and they will not wrap

Updated fiddle

.flex > div
{
   flex: 1 0 50%;
   text-align: center;
   padding: 10px;
   overflow: hidden;
}

---

An alternative is to use min-width: 0, though that might make the content overflow

.flex > div
{
   flex: 1 0 50%;
   text-align: center;
   padding: 10px;
   min-width: 0;
}