CSS: 如何使用 display:flex 设置比例宽度？

Question

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

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

使用旧的 width-属性设置 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>

Answer 1

您可以使用 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>

Answer 2

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

CSS: 如何使用 display:flex 设置比例宽度？

CSS: How to set procentual width using display:flex?

html

css

width

flexbox