Question

我有一个父元素，它有一个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>

Answer 1

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

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

Answer 2

对于您要查找的内容，一种解决方法是将.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>

Answer 3

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

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

Answer 4

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

如果内容过多，Div就会超出范围

4 个答案: