Question

请参阅此代码

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(238, 235, 235);
}

.header {
  background-color: rgb(126, 209, 171);
  height: 100px;  
}

.content {
  flex-grow: 1;
  background-color: rgb(209, 126, 165);
  overflow-y: scroll;
}

.row {
  height: 20px;
  border-bottom: 1px solid black;
}

＆＃13;

<div id="container">
  <div class="header">hello</div>
  <div class="content">
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
  </div>
</div>

＆＃13;

这很好。＆＃34; .header＆＃34;渲染后的高度为100px。
但在我插入大量的＆＃34; .row＆＃34; div成＆＃34; .content＆＃34; div，＆＃34; .header＆＃34;的高度缩小不到100px。

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(238, 235, 235);
}

.header {
  background-color: rgb(126, 209, 171);
  height: 100px;  
}

.content {
  flex-grow: 1;
  background-color: rgb(209, 126, 165);
  overflow-y: scroll;
}

.row {
  height: 20px;
  border-bottom: 1px solid black;
}

＆＃13;

<div id="container">
  <div class="header">hello</div>
  <div class="content">
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
    <div class="row">this is row</div>
  </div>
</div>

＆＃13;

我想知道为什么＆＃34; .row＆＃34;里面的内容＆＃39; .content＆＃39; div效应＆＃34; .header＆＃34; div，即使＆＃39; .content＆＃39;是可滚动的。
我知道我可以通过提供＆＃34; .header＆＃34;来解决它。＆＃34; flex-shrink：0＆＃34;但我不知道为什么要这么做。

Answer 1

我相信你已经有答案了。 ;）

原因是flex的默认收缩值为1。因此，您必须将其更改为0才能重置。

.item { flex-shrink: <number>; /* default 1 */ }

阅读：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

“flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸） .flex容器扩展项目以填充可用空间，或缩小它们以防止溢出“。

取自this guide的背景部分（也在我的评论中）。

.row div .content div对.header div影响的原因，即使.content是容器能够改变其项目的宽度/高度 - 为了最好地填补你在那里的空间。

可滚动的div效果到它的外部div

2 个答案: