如何强迫儿童不要让容器溢出？

Question

给定一个flexbox容器，如果孩子有很多内容，我怎么能确保它们不会溢出容器？

import UIKit


class SecondpgController: UIViewController {
     var inputContainerView: UIView!
     override func viewDidLoad() {
       super.viewDidLoad()

    view.backgroundColor = UIColor .gray

      let inputContainerView = UIView()
    self.view.addSubview(inputContainerView)
    //inputContainerView.backgroundColor = UIColor(red: 162/255, green: 20/255, blue: 35/255, alpha: 1)

    inputContainerView.backgroundColor = .white
    inputContainerView.translatesAutoresizingMaskIntoConstraints = false

    //inputContainerView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300).isActive = true
    //nputContainerView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10).isActive = true
    inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 200).isActive = true
    inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 200).isActive = true

.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);
}

Answer 1

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

.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>

孩子们的高度与他们的内容高度成比例分配。溢出的内容被隐藏。

Answer 2

您可以在overflow: auto元素上使用child。如果您只想在最大的商品上隐藏overflow，那么您可以在该商品上使用flex: 1。

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  display: flex;
  width: 100px;
  overflow: auto;
}
.first {
  background-color: rgba(255, 0, 0, 0.2);
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
  flex: 1;
}
.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>

Answer 3

flex有 三个值：flex-grow | flex-shrink |柔性基础;

你应该为第一个孩子申请特定的最大身高。

＆＃13;

＆＃13;

SELECT CASE WHEN (A.LocID IS NULL) THEN B.LocID ELSE A.LocID END
   LocID, Count(A.CarID), Count(B.empID) FROM Car A FULL OUTER JOIN
   Employee B ON A.LocID=B.LocID
GROUP BY A.LocID, B.LocID;

＆＃13;

＆＃13;

＆＃13;

否则，如果第一个div高度增加，它将在其他div上占主导地位。

＆＃13;

＆＃13;

.first {
  background-color: rgba(255, 0, 0, 0.2);
  flex: 0 1 1;
  max-height:70px;
}

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  height: 210px;
  width: 200px;
}
.child {
  width: 100px;
  overflow:hidden;

}
.first {
  background-color: rgba(255, 0, 0, 0.2);
  flex: 0 1 auto;
}
.second {
  background-color: rgba(0, 255, 0, 0.2);
  flex: 0 1 1;
}
.third {
  background-color: rgba(0, 0, 255, 0.2);
 flex: 0 1 1;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用min-height: 210px;代替在容器上明确设置高度可以让超长的孩子延长其高度，从而为您提供所需的效果。

另外，写好问题！很高兴看到与预期相关的图表，等等。