Question

我想只使用CSS来制作它，所以我有一个使用display: inline-flex的容器。我希望这个容器只显示内部项目，如果它们适合容器并且不溢出。如果容器内部的任何部分溢出，那么我不想显示它。目前我可以隐藏溢出的盒子部分，但我无法隐藏整个溢出的项目。

有没有办法用HTML和CSS完成？我目前正在使用的是此代码段https://codepen.io/duebstep/pen/OXENqN

Answer 1

我在flex-container添加了一个固定的高度，并将flex-wrap设置为wrap
（并将nowrap规则更改为wrap）

.flex-container {
  overflow: hidden;
  height: 130px;
  max-width: 600px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: inline-flex;
}

.wrap  { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-item {
  background: tomato;
  padding: 5px;
  min-width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  flex: 1;
  display: inline-block;
}

<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>

Answer 2

试试这个

<ul class="flex-container nowrap">
 <li class="flex-item">1</li>
 <li class="flex-item">2</li>
 <li class="flex-item">3</li>
 <li class="flex-item">4</li>
 <li class="flex-item">5</li>
 <li class="flex-item">6</li>
 <li class="flex-item">7</li>
 <li class="flex-item">8</li>
 <li style="clear:both"></li>
</ul>

CSS

<style>
 .flex-container {
   max-width: 600px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;

}

.flex-item {
  float:left;
  background: tomato;
  padding: 5px;
  min-width: 100px;
  height: 100px;
  margin: 10px;

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

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;
   }
</style>

Answer 3

几个想法。首先，检测一个div部分位于它之外的父母是一个javascript技巧，而不是CSS。

其次，阅读this awesome guide to flexbox。它将帮助您清理您的CSS并为您做一些更干净的事情。它确实帮助了我。

最后，css可能取决于您使用的固定大小。你打算滚动吗？为什么他们的硬度和最小宽度？这可以帮助我引导您获得更具针对性的解决方案。

Flex-box仅显示适合容器

3 个答案:

试试这个

CSS