如何迫使孩子们不让容器溢出? [英] How to force flex children not to overflow the container?

问题描述

给出一个flexbox容器，我如何确保如果孩子有很多内容，他们不会溢出该容器?

Given a flexbox container, how could I make sure that, if children have lots of content, they don't overflow the container?

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  display: flex;
  width: 100px;
}
.first {
  background-color: rgba(255, 0, 0, 0.2);
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
}
.third {
  background-color: rgba(0, 0, 255, 0.2);
}

<div class="container">
  <div class="first child">first first first first first first first</div>
  <div class="second child">second second second second second second second second second second second second second second second second second second second</div>
  <div class="third child">third</div>
</div>

推荐答案

子级溢出其父级元素，因为其固有高度(其内容的高度)大于父级的高度.您可以通过在子元素上设置min-height: 0来建议浏览器忽略固有高度.如果添加overflow: hidden，结果应该是您期望的结果:

The children overflow their parent element because their intrinsic height (the height of their contents) is larger than the parent's height. You can advise the browser to ignore the intrinsic height by setting min-height: 0 on the child elements. If you add overflow: hidden the result should be what you seem to expect:

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  width: 100px;
  min-height: 0;
  overflow: hidden;
}
.first {
  background-color: rgba(255, 0, 0, 0.2);
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
}
.third {
  background-color: rgba(0, 0, 255, 0.2);
}

<div class="container">
  <div class="first child">first first first first first first first</div>
  <div class="second child">second second second second second second second second second second second second second second second second second second second</div>
  <div class="third child">third</div>
</div>

孩子的身高与他们的身高成正比.溢出的内容被隐藏.

The children get height distributed among them proportionally to their content height. Overflowing content is hidden.

这篇关于如何迫使孩子们不让容器溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！