Question

我有一个页面，其中主体是一个列灵活容器，中间有一个页眉，一个页脚和一个主容器。这个主容器也是一个弹性容器，这次排成一排，并排有两个div。在左侧的div，会有svg container。它的尺寸将由jQuery设置以适应可用空间。右边的div将接收可变长度的文本。我需要svg保持在屏幕上的时间而不移动，所以如果内容太多，我希望div向右滚动。

这是我的代码：

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

＆＃13;

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

＆＃13;

我可以让中间的container滚动，而不是右边的项目。我想这是因为我不能给中间container一个最大height，因为它由flex设置。

Answer 1

我可以解决这个问题，将overflow-y: auto;添加到您的#middle元素中。似乎flex没有考虑Firefox的max-height: 100%。如果你删除它没有任何区别。

顺便说一句，我的想法是在问jsFiddle

中找到flexbox misbehaving with max-height。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

在Firefox中嵌套的Flex容器内项目溢出

1 个答案: