html 使用flexbox，我怎样才能有一个滚动条溢出的孩子？

rmbxnbpk 于 2023-05-15 发布在其他

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

我用的是flexbox。我有一个父div和两个孩子。当第二个孩子在第二行（例如在纵向模式），然后我希望它有作为最大高度的高度，它的父母，也有一个滚动条。
PS：在我的例子中，我通过让子元素的宽度大于父元素的宽度来模拟2行。

.dialog {
  background-color: cyan;
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
}

.left {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

.right {
  width: 400px;
  height: 1000px;
  background-color: pink;
  overflow-y: scroll;
}

<div class="dialog">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

这里有一个codesandbox链接：https://codesandbox.io/s/fragrant-brook-9pw20y?file=/src/styles.css

Html

来源：https://stackoverflow.com/questions/76211394/using-flexbox-how-can-i-have-a-scroll-bar-for-overflowing-child

1条答案

按热度按时间

vu8f3i0k1#

（请原谅我的英语和拼写）
它非常简单，
只要给予右边的孩子一个100%的高度和一个100%的max-height减去第一个孩子的高度，使用calc（）css函数像这样减去高度，

height: 100%;
  max-height: calc(100% - 300px) /*mind the space around the subtraction symbol*/

也可以使用overflow：auto;而不是scroll，这将使滚动条仅在内容溢出时显示

.right {
  width: 400px;
  height: 100%; <-- height 100%m to match parent
  max-height: calc(100% - 300px); <-- set maximum height 100% minus the height of the first element,

  background-color: pink;
  overflow-y: auto; <-- overflow auto so the scrollbar can only show up then there is overflowing content
 }

请评论如果你需要我澄清什么，或者如果我误解了你想做什么

.dialog {
  background-color: cyan;
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
}

.left {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

   .right {
      width: 400px;

      height: 100%;
      max-height: calc(100% - 300px);

      background-color: pink;
      overflow-y: auto; 
    }

<div class="dialog">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

赞(0）回复(0）举报 2023-05-15

我来回答

html 使用flexbox，我怎样才能有一个滚动条溢出的孩子？

1条答案

相关问题

热门标签

最新问答