Question

我注意到在使用flex时允许容器的内容溢出容器（列）。我怎么能阻止这个？我希望内容具有列大小的最大高度和最大宽度。

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
[class*='col-'] {
  flex: 1;
}
.col-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

<div class="row" style="height:250px;">

  <div class="col-6" style="background:red;">

  </div>
  <!-- /.col-6 -->

  <div class="col-6" style="background:blue;">

    <img src="https://pixabay.com/get/e83cb50c2ff1043ed1584d05fb0938c9bd22ffd41db9154792f2c47fa6/discus-fish-1943755_1280.jpg" />

  </div>
  <!-- /.col-6 -->

</div>
<!-- /.row -->

Answer 1

这不是特定于flex的问题。你限制了图像的大小，这就是它溢出的原因。

将此添加到您的css

.col-6 img{
  max-width:100%;
  max-height:100%;
  display:block;
}

这是一个工作代码段

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

[class*='col-'] {
	flex: 1;
}
.col-6 {
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
	max-width: 50%;	
    height:100%;
}
.col-6 img{
  max-width:100%;
  display:block;
  max-height:100%;
}

<div class="row" style="height:250px;">
 	<div class="col-6" style="background:red;"> 	
	</div> <!-- /.col-6 -->  	
	<div class="col-6" style="background:blue;">         
      <img src="https://pixabay.com/get/e83cb50c2ff1043ed1584d05fb0938c9bd22ffd41db9154792f2c47fa6/discus-fish-1943755_1280.jpg" />
	</div> <!-- /.col-6 -->
</div> <!-- /.row -->

Answer 2

我要建议overflow:scroll，因为您不清楚如何处理过多的文字。图像可以被约束和缩小，但如果你对复制做同样的事情，它将变得不可读。

＆＃13;

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
[class*='col-'] {
  flex: 1;
}
.col-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
  overflow-y: scroll;
}

＆＃13;

<div class="row" style="height:250px;">

  <div class="col-6" style="background:red;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas rutrum turpis, at iaculis risus laoreet vel. Integer at dui justo. Ut viverra vitae lacus sit amet sollicitudin. Curabitur molestie sollicitudin est, eget suscipit turpis interdum sit amet. Cras at viverra ligula. Sed sed finibus nisi. Sed dictum sem a dui sollicitudin, eget volutpat neque vestibulum. In imperdiet urna a urna venenatis, id tristique erat interdum. Aenean dapibus molestie lorem, ut egestas massa pretium nec.

Nullam vitae accumsan tortor. Nulla sit amet diam a nibh porta eleifend a sed ligula. Donec sagittis vulputate ante molestie auctor. Donec tincidunt, nisl et vulputate venenatis, felis lorem imperdiet mauris, quis pellentesque dolor leo non enim. In in commodo nibh. Aliquam sed ullamcorper augue. Etiam nec turpis libero. Aliquam cursus venenatis tortor eget ornare. Quisque in volutpat urna, quis aliquam est. Fusce hendrerit ligula eget vehicula rutrum. Praesent id odio urna.</p>
  </div>
  <!-- /.col-6 -->

  <div class="col-6" style="background:blue;">

    <img src="http://lorempixel.com/output/nature-q-c-1920-1920-8.jpg" />

  </div>
  <!-- /.col-6 -->

</div>
<!-- /.row -->

＆＃13;

CSS flex：包含flex容器中的内容

2 个答案: