Question

我需要彼此相邻显示几个方框。每个框都有可变数量的子项。父母应根据子项目占用的空间进行扩展。物品的宽度固定很重要。我正在使用flexbox进行布局。它应该是这样的：

我写了Plunkr来说明。

问题：当孩子占用更多空间时，Chrome不会扩展父级。子项目显示在父母的边界之外并出现在邻近的父级中，导致这种混乱：

具有讽刺意味的是，如果您在IE 11或Edge中打开Plunkr，它可以正常工作。

我做错了什么？

以下是代码段：

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.items {
  display: flex;
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 4</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 5</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 6</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>

Answer 1

这似乎是Chrome中的一个错误。

在这段代码中：

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

... Chrome不符合固定的25px宽度。或者，至少，容器没有识别空间。在考虑所有项目计算之前，看起来容器的大小正确。

简单的解决方法是使用width代替flex-basis。

.items span {
    flex-shrink: 0;
    width: 25px;
 }

revised demo

<强>更新

错误报告

Flex-basis is being ignored when sizing nested flex containers.

＆＃34;是的，这是我们遇到的一个错误的结果，或许与不幸的规范后果相结合......＆＃34;

＆＃34;当外部flexbox找到所需的内部flexbox大小时，它会询问其最大内容大小（请参阅LayoutFlexibleBox :: computeInnerFlexBaseSizeForChild）。但是在这里出现错误，最大内容大小不考虑flex-basis，只考虑宽度属性/实际内容。这就是为什么添加显式宽度可以修复错误。＆＃34;

Answer 2

尝试添加public static void createExcelFile(String fileName, List<TranslationsGeneratorModel> translationsGenModelList) throws FileNotFoundException { Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("language_cvl_translation"); FileOutputStream out = new FileOutputStream(new File("R:\\"+fileName)); ... ... ... try { workbook.write(out); out.close(); workbook.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } System.out.println(fileName + "written successfully"); }代替inline-flex，同时注释掉一些不需要的柔化设计，请参阅此处，

flex

/* Styles go here */
body {
  /* display: flex; */
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: inline-flex;
  flex-direction: column;
}

.items {
  /* display: flex; */
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

Answer 3

请查看

使用 box-sizing：border-box;对于父元素并使用width来维护每个元素的宽度

https://plnkr.co/edit/3p8PwmLtHYozEFveRvTX

/* Styles go here */

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  box-sizing : border-box;
}

.items {
  display: flex;
}

.items span {
  width: 25px;
}

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="parent">
    <h4>Parent 1</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 2</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 3</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 4</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 5</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 6</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
</body>

</html>

Chrome不会根据孩子的内容展开flex父级

3 个答案: