html - 当里面有文本时，如何防止 HTML 元素放大？

Question

我有两列，第一列必须有 200px，但不能超过窗口的 50%，第二列必须占剩余部分。

基本上，我希望它表现得像第一行:https://jsfiddle.net/vao88dd4/10/

.box {
  display: flex;
  background-color: orange;
  flex-direction: row;
  width: 100%;
  height: 150px;
}
.left {
  background-color: yellow;
  width: 200px;
  max-width: 50%
}
.right {
  background-color: green;
  flex-grow: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}

<span class="box">
  <span class="left">LEFT</span>  
  <span class="right">RIGHT</span>
</span>
<span class="box">
  <span class="left">LEFT</span>  
  <span class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</span>
</span>

Image

问题是，当第二列有文字时，它会放大，导致第一列缩小。

我如何才能得到假装的行为？

Answer 1

如果您只针对现代浏览器，您可能需要使用 table 元素或使用 display: grid。