如果容器“flex-wrap”设置为“wrap”，如何强制弹性列保持在同一行

Question

我正在尝试在一个 flex 容器内创建一排两列的布局。这是代码http://jsfiddle.net/73574emn/1/。

我想要的是使行始终保持在列上方，并使两列保持在同一行上。显然，现在如果我将窗口设置得太小，那么 column3 将在 column2 下向下移动，因为flex-wrap属性设置为wrap（因为我需要行和列在不同的行上）。

我想我可以将行包装在一个 flex 容器中，并将两列包装在另一个中，但我想知道当它们在同一个容器中时是否有任何方法可以做到这一点，如果是，那么它是如何工作的。也许我可以用宽度或最小宽度做一些事情？

*
{
    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

弹性项目的min-width默认值是auto，因此它不允许元素小于其内容。

添加overflow: hidden到并排列，它们不会换行

更新的小提琴

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

另一种方法是使用min-width: 0，尽管这可能会使内容溢出

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

Answer 2

只需删除 flex-basis 值

改变

flex:1 0 50%;

到

flex:1 0;

然后将宽度添加到列

width:50%;

这是示例：

flex:1 0 50%;

flex:1 0;