CSS：如何使用 display:flex 设置 procentual 宽度？答案

【问题标题】：CSS: How to set procentual width using display:flex?CSS：如何使用 display:flex 设置 procentual 宽度？
【发布时间】：2016-05-30 22:09:35
【问题描述】：

我有一个要求，我需要在某些 div 中垂直对齐内容。 Flex-box 将以优雅的方式提供我所需要的。

但我无法完全弄清楚设置弹性项目宽度的最佳方法是什么。如果我使用flex: 50%，项目会随着内容的增长而增长（这不是我想要的）。另外，我无法使用overflow: hidden（因为 div 中的内容）。

使用旧的宽度属性设置 width 是否可行（这可行）？换句话说： display: flex without flex: xx?

.wrapper {
  display: flex;
  width: 200px;
}

.left {
  display: flex;
  flex: 50%;
  background-color: green;
  /* overflow: hidden; *//* can't use that */
}

.right {
  display: flex;
  flex: 50%;
  background-color: red;
  /* overflow: hidden; *//* can't use that */
}

<div class="wrapper">
  <div class="left">BigBigBigBigBig</div>
  <div class="right">Small</div>
</div>

【问题讨论】：

标签： html css width flexbox

【解决方案1】：

提供的小提琴是否回答了您的问题，只是不太确定这是您所追求的。

【讨论】：

谢谢。现在是 50/50。但我需要 text-overflow: ellipsis 才能工作。你知道怎么做吗？
应该这样做：-`.textToEllipsis { width: 250px;空白：nowrap；溢出：隐藏；文本溢出：省略号； },

【解决方案2】：

您可以使用flex: 0 0 50%，因此flex-grow 将设置为0，并且不会超过50%。

.wrapper {
  display: flex;
  width: 200px;
  align-items: center;
}

.left {
  flex: 0 0 50%;
  background-color: green;
  word-break: break-all;
}

.right {
  flex: 0 0 50%;
  background-color: red;
}

<div class="wrapper">
  <div class="left">BigBigBsdfsdfigBigBigsdfsdf</div>
  <div class="right">Small</div>
</div>

【讨论】：

谢谢！我的 sn-p 不够精确 - 很抱歉。我做了一些更改：jsfiddle.net/p43madua/6。你介意看看吗？
我明白了！很好。如果这比设置好的旧宽度更干净，你能做一个假设吗？另外，如果我有最小宽度，你知道为什么行为会改变吗？这是规格吗？