时间戳

首页 > 解决方案 > 尽管没有在任何地方设置它们的高度，但 Flexbox 内容不会拉伸以适应容器

html - 尽管没有在任何地方设置它们的高度，但 Flexbox 内容不会拉伸以适应容器

问题描述

基本上是标题。我有一个 flex 容器，它的高度设置为特定值（100%，但其父项是特定值。我希望项目填充可用空间，而不管它们中的内容如何（特别是第二个项目，treeview1 ，它的溢出设置为滚动。但是，这些项目根本不会拉伸以填充。你对我有什么建议吗？谢谢 :)

html, body, .container-fluid, .row, #left-panel {
  height: 100%;
}

.thumbnail-view {
  margin: 2px;
  padding: 2px;
  width: 100%;
  overflow-y: scroll;
}

.buttons-placeholder {
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.buttons-placeholder button {
    margin: 2px;
    flex-grow: 1;
}

.btn-success {
  width: 100%;
  margin-bottom: 10px;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2" id="left-panel">
      <div class="buttons-placeholder">
        <button type="button" class="btn btn-primary">Load Batch</button>
        <button type="button" class="btn btn-primary">Save Batch</button>
      </div>
      <div class="thumbnail-view"></div>
      <button type="button" class="btn btn-success">Submit</button>
    </div>
  </div>
</div>

编辑：对不起，如果格式关闭，我对此有点陌生。编辑 2：稍微清理一下代码。

标签： htmlcssflexbox

解决方案

我们可以设置display: flex; flex-direction:column; height: 100vh;类row并设置flex: 1为需要填充剩余空间的元素。另外，尝试flex-direction: column为 flex 容器设置：

html, body, .container-fluid, .row, #left-panel {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.thumbnail-view {
    margin: 2px;
    padding: 2px;
    width: 100%;
    overflow-y: scroll;
    background-color: lightpink;
    flex: 1;
 }

 .buttons-placeholder {
     padding-right: 15px;
     padding-left: 15px;
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
  }

  .buttons-placeholder button {
      margin: 2px;
      flex-grow: 1;
  }

  .btn-success {
      width: 100%;
      margin-bottom: 10px;
  }

和html：

<div class="container-fluid">
    <div class="row">
        <div class="buttons-placeholder">
            <button type="button" class="btn btn-primary">Load Batch</button>
            <button type="button" class="btn btn-primary">Save Batch</button>
          </div>
          <div class="thumbnail-view"></div>
          <button type="button" class="btn btn-success">Submit</button>
    </div>
  </div>

推荐阅读