如果内容太多，Div会超出范围[重复]答案

【问题标题】：Div grow out of bounds if content is too much [duplicate]如果内容太多，Div会超出范围[重复]
【发布时间】：2019-08-23 19:34:42
【问题描述】：

我有一个父元素，它有一个max-width，但在里面我有一个表格，我想扩展它超过max-width，但前提是因为表格上的内容是必要的。

这是一个小提琴，你可以看到：https://jsfiddle.net/z6nbc75g/

尝试点击“添加列”按钮几次，看看当添加太多时，它们会开始被压缩，而不是让表格变宽。

代码如下：

.parent {
  width: 100%;
  max-width: 20rem;
}

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
}

.table .col {
  border: 1px solid red;
  padding: 2px;
}

<div class="parent">
  <div class="table">
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
  </div>
</div>

【问题讨论】：

@Ingus 不，我的情况恰恰相反，完全不同
您可以选择在.table .col 上设置`min-width` 吗？
期望的结果是什么？父级中的水平滚动？列在父级之外可见？
将flex-shrink: 0; 添加到您的.table .col{} 规则中，它不会缩小
请注意，.parent 会随着需要显示的内容一起增长inline-flex/block。

标签： html css flexbox

【解决方案1】：

您可以更改行的样式。添加 flex-wrap 属性。

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
  flex-flow: row wrap;
}

【讨论】：

【解决方案2】：

你可以使用min-width: max-content：https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content

小提琴：https://jsfiddle.net/r84q7nvj/

【讨论】：

这可行，但浏览器支持很糟糕：/
@nick 我明白了。我添加了一个替代答案。

【解决方案3】：

对于您要查找的内容，处理此问题的一种方法是将您的 .parent 元素设置为 inline-block （因此它只占用子元素的宽度），然后防止在列上换行（假设您希望列中的所有内容都位于同一行 - 如果您不这样做，表格仍将扩展直到达到页面宽度，然后使文本在列内换行。

下面的片段 - 我已经从你的 jsfiddle 添加了按钮，所以你可以测试一下:)

document.querySelector('button').addEventListener('click', () => {
	let rows = document.querySelectorAll('.row');
  
  rows.forEach(row => {
  	let col = document.createElement('div');
    col.classList.add('col');
    col.textContent = 'lorem ipsum';
    
    row.appendChild(col);
  });
});

.parent {
  display:inline-block;
}

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
}

.table .col {
  border: 1px solid red;
  padding: 2px;
}

<div class="parent">
  <div class="table">
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
  </div>
</div>

<button>Add columns</button>

【讨论】：

它可以工作，但行宽没有改变，它只是溢出
嗨@nick，我已经拿出了white-space:nowrap - 这就是你要找的吗？

【解决方案4】：

您还可以在父级上使用display: inline-flex 以及在其子级上使用min-width: 200px 和flex-basis 来解决此问题：https://jsfiddle.net/cnxgruzt/

【讨论】：