html - flex-direction：单个孩子的“列”与“行”

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>

标签： htmlcssflexbox

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>