flex-direction:单个子级的"column“vs "row”

Question

我有以下的工作布局。我想要一个垂直滚动条只为.gallery-items元素。布局不应溢出.split-panel容器。

偶然间，我发现向.pane-2添加flex-direction: column会破坏布局。

所以，问题是为什么会发生这种情况？

据我所知，如果只有一个子元素，flex-direction: row和flex-direction: column应该没有区别。

​

body {
  margin: 0;
}

.split-panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.pane-2 {
  overflow: hidden;
  display: flex;
  /* flex-direction: column; */
}

.gallery {
  display: flex;
  flex-direction: column;
}

.gallery-items {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.item {
  background: teal;
  width: 200px;
  height: 200px;
  margin: 10px;
  display: flex;
}

<div class="split-panel">
  <div class="pane-1">Content</div>
  <hr />
  <div class="pane-2">
    <div class="gallery">
      <div class="toolbar">
        <h1>Title</h1>
      </div>
      <div class="gallery-items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

因为列方向正在推动图库元素的高度以适合其内容。如果您将其设置为显式100%，则可以正常工作。

​

body {
  margin: 0;
}

.split-panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.pane-2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gallery {
  display: flex;
  flex-direction: column;
  height: 100%; // <--------------------
}

.gallery-items {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.item {
  background: teal;
  width: 200px;
  height: 200px;
  margin: 10px;
  display: flex;
}

<div class="split-panel">
  <div class="pane-1">Content</div>
  <hr />
  <div class="pane-2">
    <div class="gallery">
      <div class="toolbar">
        <h1>Title</h1>
      </div>
      <div class="gallery-items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
  </div>
</div>

​