html - Flexbox中的内容具有最小大小

原文 标签 html css flexbox vertical-alignment

我正在使用flexbox在其容器中垂直对齐具有可变高度的div(我可以使用其他选项)。
但是当容器小于内容时,我很难获得可靠的滚动行为。



html,
body,
.app {
  height: 100%;
}

.app {
  background-color: blue;
  color: white;
}

.app header {
  height: 80px;
  background-color: red;
}

.app .container {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: calc(100% - 80px);
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.app .container .content {
  width: 300px;
  height: 200px;
  background-color: yellow;
  color: black;
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="app">
  <header>Header</header>
  <div class="container">
    <div class="content">
      Variable content height
    </div>
  </div>
</div>





非常感谢!

最佳答案

保留overflow:auto且无需将列用作方向,只需将其保留为行即可。然后依靠margin:auto保持元素居中:

没有溢出且居中的示例:



html, body, .app {
  height: 100%;
}
body {
 margin:0;
}

.app {
  background-color: blue;
  color: white;
}
.app header {
  height: 80px;
  background-color: red;
}
.app .container {
  display: flex;
  flex-direction: row;
  background-color: black;
  height: calc(100% - 80px);
  justify-content: center;
  overflow: auto;
}
.app .container .content {
  width: 300px;
  height:100px;
  background-color: yellow;
  color: black;
  margin:auto;
}

<div class="app">
  <header>Header</header>
  <div class="container">
    <div class="content">
      Variable content height
    </div>
  </div>
</div>





溢出和滚动示例



html, body, .app {
  height: 100%;
}
body {
 margin:0;
}

.app {
  background-color: blue;
  color: white;
}
.app header {
  height: 80px;
  background-color: red;
}
.app .container {
  display: flex;
  flex-direction: row;
  background-color: black;
  height: calc(100% - 80px);
  justify-content: center;
  overflow: auto;
}
.app .container .content {
  width: 300px;
  height:900px;
  background-color: yellow;
  color: black;
  margin:auto;
}

<div class="app">
  <header>Header</header>
  <div class="container">
    <div class="content">
      Variable content height
    </div>
  </div>
</div>

关于html - Flexbox中的内容具有最小大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48704171/

相关文章:

javascript - HTML5 大 Canvas - 移动和缩放包括背景在内的整个内容

javascript - React Prop 和状态值不更新

html - 在表格上放置标题

java - 如何使 HTML 表格滚动

html - 希望将鼠标悬停在其上时产生交易效果(按钮从左到右开始填充渐变颜色),

html - Bootstrap 4,如何使用 "no scroll"在 SPA 上获得响应高度?

html - 注释不适用于Chrome

jquery - 如何为粘性菜单添加一定的高度?

html - 如何扩展 <div> 以填充其父级,而不根据其自身内容进行扩展?

html - CSS Flexbox烦人行元素的轻微偏移