编辑：

Question

我需要在容器中放入3列。它们应该具有相同的宽度并均匀分布。我使用flex，它工作正常。

最后我需要插入一组＆＃34;卡＆＃34;在每列中...因为卡的数量可能导致列的高度大于浏览器中显示的高度，所以容器（列的父级）的overflow设置为scroll }。因此，当发生这种情况时，您仍然可以向下滚动以查看列底部的卡片。

我有两个问题需要解决：

1）只要我在左栏插入一张卡片，那列就会比另外两列更大。如果我将列设置为flex并将卡片上的flex-grow设置为0，则无效。我不确定为什么？

编辑：

我在width: 33%;上设置.column修正了＃1。

=============================================== ============================

2）左侧列未通过浏览器的底部边界，即使它包含导致容器可能溢出的卡片。我想要做的是确保列＆＃34;包含＆＃34;卡片。我怎么能实现这一点（使用flex还是不使用）？

我创建了一个fidle并用下图说明了这个问题。

JSFIDDLE is here

Answer 1

1）一旦我在左栏插入一张卡片，那列就会变成大于其他两个。如果我将列设置为flex并设置在卡片上弹性增长到0，没有任何区别。我不确定为什么？

flex-grow没有定义宽度，它定义了如何分配可用空间。

您可以使用flex-basis: 33.333%

2）左列未绘制通过底部边界浏览器，即使它包含导致容器的卡可能溢出。我想做的是确保专栏 “包含”卡片。我怎么能实现这一点（使用flex还是不使用）？

将height: 100%上的container更改为min-height: 100%

Stack snippet

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.container
{
	display: flex;
	flex-direction: row;
	border: 2px solid black;
	overflow: scroll;
	padding: 0;
	margin: 0;
	min-height: 100%;                  /*  changed  to 'min-height'  */
	width: 100%;
	box-sizing: border-box;
}

.column
{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: grey;
	margin: 5px;
}

.article
{
	margin: 5px;
	background: white;
	height: 100px;
	border: 1px solid orange;
}

<div class="container">


	<div class="column">
		<div class="article">article1</div>
		<div class="article">article2</div>
		<div class="article">article3</div>
		<div class="article">article4</div>
		<div class="article">article5</div>
		<div class="article">article6</div>
		<div class="article">article7</div>
		
	</div>
	<div class="column">col 2</div>
	<div class="column">col 3</div>

</div>

Answer 2

要使列宽度相等而不是flex: 1 1 auto，请使用flex: 1 1 0（与flex: 1相同）。

使用flex-basis: auto，每列的宽度取决于其内容，因此无法保证宽度相等的列。

使用flex-basis: 0时，所有列的宽度都是容器中空格的相等分布。

以下是flex-basis的更完整说明以及auto和0之间的区别。

Make flex-grow expand items based on their original size

要使div尊重height: 100px，请添加flex-shrink: 0。默认情况下，Flex项目有flex-shrink: 1。

以下是一个更完整的解释：

What are the differences between flex-basis and width?

要让容器跟进，请参阅the other answer to this question。

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  overflow: scroll;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  background: grey;
  margin: 5px;
  flex: 1;   /* adjustment */
}

.article {
  margin: 5px;
  background: white;
  border: 1px solid orange;
  flex: 0 0 100px;   /* adjustment */
}

<div class="container">
  <div class="column">
    <div class="article">article1</div>
    <div class="article">article2</div>
    <div class="article">article3</div>
    <div class="article">article4</div>
    <div class="article">article5</div>
    <div class="article">article6</div>
    <div class="article">article7</div>
  </div>
  <div class="column">col 2</div>
  <div class="column">col 3</div>
</div>

将div插入flex常规列：列宽和溢出问题

编辑：

2 个答案: