防止固定比例的项目在生长时溢出交叉轴上的柔性容器

问题描述 投票：0回答：1

我需要将 1x1 的项目（可能是头像）放入预定比例的弹性行容器中，该容器可以根据父母的增长而增长。问题是，在一定数量的项目下，它们会垂直溢出容器（弯曲交叉轴）。

这是一个小提琴：https://jsfiddle.net/3hv0bxuf/3/ HTML：

<html>

  <body>
    <div class="container">
      <div class="item">
        <div class="subitem">
          1
        </div>
      </div>
      <div class="item">
        <div class="subitem">
          2
        </div>
      </div>
    </div>
  </body>

</html>

CSS：

div.container {
  margin-top: 40px;
  /* display: grid; */
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  /* grid-template-rows: 1fr; */
  /* align-items: center; */
  width: 300px;
  height: 100px;
  padding: 10px;
  background-color: lightblue;
  align-items: center;
}

.item {
  flex: 1 1 0;
  display: flex;
  /* align-items: stretch; */
  border: 1px solid black;
  padding: 3px;
  /* object-fit: contain; */
}
.subitem {
  /* width: 100%; */
  flex: 1 1 0;
  aspect-ratio: 1;
  border: 1px dashed black;
  max-height: 100%;
  max-width: 100%;
}

尝试用 

display: grid
代替 flex，结果相同。 我期待一个可以动态适应两个轴上的项目的结构，而无需指定 px 尺寸。

css flexbox
1个回答
0
投票

使用包装容器固定宽度和高度，然后使用 Flex 来显示盒子（Flex 容器宽度将影响 

1fr
的值，否则）。 这里的包装器是绿色的（带有填充以使其更直观），
calc(100% - 10px)
的高度必须根据填充进行调整。

div.container {
  width: 300px;
  margin-top: 40px;
  height: 100px;
  padding: 5px;
  background-color: green;
}

div.sub-container {
  height: calc(100% - 10px);
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: lightblue;
}

.item {
  display: grid;
  aspect-ratio: 1;
  height: calc(100% - 10px);
  border: 1px solid black;
  padding: 3px;
}
.subitem {
  border: 1px dashed black;
}
<html>
  <body>
    <div class="container">
      <div class="sub-container">
        <div class="item">
          <div class="subitem">
            1
          </div>
        </div>
        <div class="item">
          <div class="subitem">
            2
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.