我想知道是否有人可以帮助我解决这个问题，我似乎找不到其他人想要用 Flexbox 来做到这一点！

我已经设置了一个基本的 Flexbox 场景，其中多个元素 (li) 出现在 Flexbox 容器 (ul) 中。

我还对其进行了设置，以便在换行之前可容纳在一行中的最大 li 数量为 3（通过将 ul 宽度设置为 900px，将 li 的 flex-basis 设置为 260px 来完成）。

这一切都很好，但对我来说问题在于文本最终将来自数据库。有时用德语（这么长的话）。我不知道哪些 li 会有长单词，所以我需要将它们设置为相同。

基本上我的问题是...

为什么当“li”内部的长度比普通文本长时，li 不会延伸得更宽？因此，在下面的示例中，我希望将第 3 个 li（标题文本 3）扩展以显示其所有文本，并且可能需要换行到下一行来显示此内容！因此需要切换到 2 行 2，而不是一行 3 和一行 1。

我希望一切都有意义，任何帮助都会很棒。 :)

下面是代码和 Codepen。

代码笔链接 http://codepen.io/rickideeuk/pen/waVoqq/

HTML...

  <div>
  <ul class="FlexWidgetsNew">
  <li class="WidgetNew">
  <h1>Header text 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>


<li class="WidgetNew">
  <h1>Header text 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 3</h1>
  <p>This text has a longer word than the rest xxxxxxxxxxxxxxxxxxxxxxxxxxxx12234567890 and so part of it is disappearing out of the li.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</li>
</ul>
</div>

CSS...

  .FlexWidgetsNew {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  overflow: hidden;
  width:900px;
  background-color: #f00;
  }

.WidgetNew {
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
padding: 10px 2% 30px 2%;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
border:1px solid #000;
}

h1 {
width: 100%;
word-wrap: normal;
color: #fff;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}

p {
width: 100%;
word-wrap: normal;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}

Flexbox 似乎不知道溢出的文本宽度。你说任何帮助都会很棒。如果你懂一点 JavaScript (jQuery)，那么你的这个问题就可以解决。

我们首先添加一些 CSS：

.WidgetNew.twobytwo {
  flex: 1 1 450px;
}

然后我们将使用一些 jQuery 来查找溢出的长单词并检查它们是否比父容器长li.WidgetNew.

如果带有长文本的内部 div 比父容器长，则添加该类.twobytwo给它的父母.WidgetNew element

添加 JavaScript：

var el = $('.WidgetNew > p');
$(el).each(function(index, value) {
  var tempEl = textWidth($(this));
  var tempElP = $(this).parent().width();
  if (tempEl > tempElP) {
    $(this).parent().addClass('twobytwo');
    $(this).parent().siblings().addClass('twobytwo');
  }
});

function textWidth(el){
    var text = $(el).html();
    $(el).html('<span>'+text+'</span>');
    var width = $(el).find('span:first').width();
    $(el).html(text);
    return width;
};

您的代码笔已更新 http://codepen.io/chrisallenmoore/pen/mJNWBY

希望这可以帮助。