css 在具有弹性增长的容器中：1内容在应该滚动时溢出

mpgws1up 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(137)

我有一个容器，它的大小是灵活增长的，以填补一个固定大小容器中的剩余空间。
在flex-grow容器中，我有另一个div，它比flex大小的容器大得多。如何使content-wrapper元素可滚动，而不是子元素溢出？
谢谢大家!

.main-content-container {
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
    grid-gap: 10px;
    height: 550px;
    background: green;
}

.sub-content-container {
  width: 300px;
  background: grey;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  overflow: auto;
}

.content-container {
  height: 10000px;
  background: #555;
}

body {
  background: black;
  color: white;
  padding-bottom: 30px;
}

<div class='main-content-container'>
  <p>stuff</p>
  <div class='sub-content-container'>
    <p>header</p>
    <div class='content-wrapper'>
       <div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75368940/in-container-with-flex-grow-1-the-content-is-overflowing-when-it-should-be-scro

1条答案

按热度按时间

q3qa4bjr1#

一般来说，要使overflow属性起作用，容器需要溢出。这要求容器具有固定的长度。没有固定的长度（高度或宽度），就不会触发溢出。flex-grow属性没有建立固定的长度，因此它不起作用。
当然，如果您想要动态布局，则不能在容器上设置固定高度。
因此，要解决这两个问题，请将容器设置为height: 1px。

这建立了固定长度;
它不会影响动态长度并且，
flex-grow属性将容器扩展到全高

但是还有一个问题。列方向嵌套的flex容器似乎忽略了overflow属性。这可能是因为嵌套在flex上下文中。因此，如果可能，将该容器切换回块格式上下文中。
对代码进行以下调整：

.content-wrapper {
  height: 1px; /* new */
  flex-grow: 1;
  /* display: flex; */
  flex-flow: column nowrap;
  overflow: auto;
}

x一个一个一个一个x一个一个二个x
jsFiddle demo

赞(0）回复(0）举报 2023-02-20

我来回答

css 在具有弹性增长的容器中：1内容在应该滚动时溢出

1条答案

相关问题

热门标签

最新问答