Question

我正在改进，但是在Flexbox和HTML / CSS布局上还是很新的，如果这是基本的，那么抱歉（似乎可以，但是我找不到任何东西）。

我想要一个2列的布局，第二列占据其内容所需的任何空间（这是工具的侧边栏），第一列占据其余的空间。我已经完成了这项工作，但是在我的主要内容部分中，我有一些可调整大小的内容，当它们水平调整大小时，它会使侧边栏脱离屏幕，并在其下方放置滚动条，这不是我想要的。我希望内容的宽度不能超出列的可用宽度。

这是我的代码的简化，显示了可重现的示例：

Michael Simanski
address

phone
mfsimanski@gmail.com
secondemail

文本区域仅表示可调整大小的内容。

当内容增加时，如何强制它只是列的宽度而不能拉伸？

如果有人想玩，这里是一个小提琴：https://jsfiddle.net/nuejL86k/

Answer 1

尝试使用此代码，您将需要设置flex-grow: 1来指定Flex容器需要具有相等的宽度，并需要设置flex-basis: 0%来告诉容器的初始大小是什么。

.content {
  display: flex;
}

.left,
.right {
  flex-grow: 1;
  flex-basis: 0%;
}

.right {
  background: red;
}

<div class="content">
  <div class="left">
    <textarea style="resize: both;"> </textarea>
    <textarea style="resize: both;"> </textarea>
    <textarea style="resize: both;"> </textarea>
  </div>
  <div class="right">
    something
  </div>
</div>

Flexbox禁止列扩展

1 个答案: