小编Joe*_*per的帖子

所以，我的目标是让三个方形框的边根据浏览器的大小扩展/收缩。每个框只包含一行文本，所以我们的想法是有大量的填充来填充额外的空间。

该站点是使用 flexbox 构建的，我认为我有一个优雅的解决方案：使用 :before 继承父元素的宽度并将其长度用作填充顶部：

.square:before {
content:''; 
padding-top:100%;
}

这在大多数浏览器中都可以完美运行，但我很沮丧地看到 Firefox 出现问题。这是其余的代码和一个 JSFiddle。有什么建议？

http://jsfiddle.net/uLqqop0q/5/

你CSS~~

#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}

.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;  
text-align: center;
vertical-align: middle;
}

.square:before {
content:''; 
padding-top:100%;
}

编辑：最简单的修复 - 只需将“display:table”添加到伪元素。

因此，为了不让任何人对背景故事感到厌烦，我需要从许多 API 访问数据才能运行我的脚本。在执行脚本之前需要加载所有数据，我通常很乐意这样做：我只需声明一些获取请求，编写 Promise.all，然后继续执行该函数。

然而，我遇到了某个 API 的问题，该 API 将我可以从一个请求提取的结果数量限制为 100 个，并且我需要查询所有结果。我认为这没什么大不了的，因为我想我可以通过在请求末尾附加“&page=X”来提出几个额外的请求。

那么，计划是从 API 请求页面总数，然后将其输入到 for 循环中，以将多个获取请求推送到 Promise 数组中（即 link://to/api/data&page=1 、link://to/api/data&page=2 等）。然而，当我实际尝试使用 for 循环创建此数组时，该数组返回空。这是我的工作：

const dataUrlNoPage = 'link/to/api/data&page=';
const totalPages = 3; //usually pulled via a function, but just using a static # for now

let apiRequestLoop = function(inp) {
  return new Promise(function(resolve){
    let promiseArray = [];
    for (let i = 1; i <= inp; i++) {
      let dataUrlLoop = dataUrlNoPage + i;
      fetch(dataUrlLoop).then(function(response){
        promiseArray.push(response.json());
      })
     }
    resolve(promiseArray);
  })
}

let …