弹性方向："column" vs 独生子女"row"

Question

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

意外地，我发现将flex-direction: column添加到.pane-2会破坏布局。

问题是为什么会发生这种情况?

据我所知，如果只有一个子元素，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>