Chrome不会使用计算出的灵活项目宽度来调整自动边距的大小

Question

我正在尝试使用自动边距在水平flexbox中对齐一堆可变宽度div。我无法使用justify-content: space-around，因为我在this问题中详细说明了Chrome相关问题。

我尝试对齐的div可能包含其他带有可变长度文本的元素，因此我使用display: table来扩展它们。我在div上设置了100像素的基本宽度，这样如果文本不多，它们就不会太薄。但是，Chrome似乎根据div的基本宽度计算自动边距，而不是计算宽度（如果它们由内部文本扩展）。它们之间的空间太大，导致它们溢出容器，即使它们可以装入容器内。

Here is a Codepen以我的问题为例。

＆＃13;

＆＃13;

var ITEM_WIDTHS = [350,250,110,370,110,150,400,150,170];
var ITEM_LABELS = [
	"zzzzzz",
	"zz",
	"zzzz",
	"zzzzzzzzzzzz",
	"zzzz",
	"zzzzzzzzzzzzzzzz",
	"zzzzzzzz",
	"zzzzzzzzzzzzzz",
	"zz",
];

function createConsistentWidthItems(items) {
	var i, div;
	for (i = 0; i < ITEM_WIDTHS.length; i++) {
		div = document.createElement("div");
		div.setAttribute("class","item");
		div.setAttribute("style","width: " + ITEM_WIDTHS[i] + "px; min-width: " + ITEM_WIDTHS[i] + "px;");
		div.innerHTML = i + "";
		items.push( { element: div } );
	}
}

function createConsistentlyLabeledItems(items) {
	var i, div;
	for (i = 0; i < ITEM_WIDTHS.length; i++) {
		div = document.createElement("div");
		div.setAttribute("class","item");
		div.innerHTML = i + ITEM_LABELS[i];
		items.push( { element: div } );
	}
}

function fillItemContainer(items, itemContainer) {
  for (var itemIndex in items) {
	  itemContainer.appendChild(items[itemIndex].element);
  }
}

function generateItemRows() {
  var items = [];
  createConsistentWidthItems(items);
  var itemContainer = document.getElementById("itemContainer1");
  fillItemContainer(items, itemContainer);
  
  items =[];
  createConsistentlyLabeledItems(items);
  itemContainer = document.getElementById("itemContainer2");
  fillItemContainer(items, itemContainer);
}

window.onload = generateItemRows;

＆＃13;

.item-container {
  padding: 0;
  margin: 20px 0;
  border: 4px solid black;
  width: 1500px;
  display: flex;
  overflow: scroll;
}

.item {
  background: tomato;
  border: 2px solid black;
  padding: 5px;
  width: 100px;
  min-width: 100px;
  height: 100px;
  margin: 10px auto;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  
  display: table;
}

＆＃13;

<h1>Items given fixed widths</h1>
<h2>Since they overflow the container, there are no margins</h2>
<div id="itemContainer1" class="item-container"></div>

<h1>Items given minimum width, but allowed to grow variably to fit text</h1>
<h2>Even though they shouldn't overflow the container at all, the margins cause them to do so</h2>
<div id="itemContainer2" class="item-container"></div>

＆＃13;

＆＃13;

＆＃13;

是否有一些我可以使用的CSS技巧来解决这个问题？

Answer 1

不要使用表格，也不要使用明确的width。只保留min-width。

width: auto;    /* default value */
display: block; /* default value */
min-width: 100px;

var ITEM_WIDTHS = [350,250,110,370,110,150,400,150,170];
var ITEM_LABELS = [
	"zzzzzz",
	"zz",
	"zzzz",
	"zzzzzzzzzzzz",
	"zzzz",
	"zzzzzzzzzzzzzzzz",
	"zzzzzzzz",
	"zzzzzzzzzzzzzz",
	"zz",
];

function createConsistentWidthItems(items) {
	var i, div;
	for (i = 0; i < ITEM_WIDTHS.length; i++) {
		div = document.createElement("div");
		div.setAttribute("class","item");
		div.setAttribute("style","width: " + ITEM_WIDTHS[i] + "px; min-width: " + ITEM_WIDTHS[i] + "px;");
		div.innerHTML = i + "";
		items.push( { element: div } );
	}
}

function createConsistentlyLabeledItems(items) {
	var i, div;
	for (i = 0; i < ITEM_WIDTHS.length; i++) {
		div = document.createElement("div");
		div.setAttribute("class","item");
		div.innerHTML = i + ITEM_LABELS[i];
		items.push( { element: div } );
	}
}

function fillItemContainer(items, itemContainer) {
  for (var itemIndex in items) {
	  itemContainer.appendChild(items[itemIndex].element);
  }
}

function generateItemRows() {
  var items = [];
  createConsistentWidthItems(items);
  var itemContainer = document.getElementById("itemContainer1");
  fillItemContainer(items, itemContainer);
  
  items =[];
  createConsistentlyLabeledItems(items);
  itemContainer = document.getElementById("itemContainer2");
  fillItemContainer(items, itemContainer);
}

window.onload = generateItemRows;

.item-container {
  padding: 0;
  margin: 20px 0;
  border: 4px solid black;
  width: 1500px;
  display: flex;
  overflow: scroll;
}

.item {
  background: tomato;
  border: 2px solid black;
  padding: 5px;
  min-width: 100px;
  height: 100px;
  margin: 10px auto;

  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<h1>Items given fixed widths</h1>
<h2>Since they overflow the container, there are no margins</h2>
<div id="itemContainer1" class="item-container"></div>

<h1>Items given minimum width, but allowed to grow variably to fit text</h1>
<h2>Even though they shouldn't overflow the container at all, the margins cause them to do so</h2>
<div id="itemContainer2" class="item-container"></div>

Answer 2

您不需要将display: table应用于弹性项目以允许它们展开。您可以改为使用flex: auto。

此外，您可以在弹性容器上使用justify-content: space-between来对齐弹性项目。如果项目溢出，他们将in accordance with the specification解析为flex-start。

Revised Codepen