相关疑难解决方法(0)

如何迫使孩子们不让容器溢出?

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

.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);
}
Run Code Online (Sandbox Code Playgroud)
<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> …
Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

7
推荐指数
1
解决办法
2822
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1