html - 在 flexbox 上强制垂直滚动？

Question

我一直在尝试在我的代码的 section 标签上实现垂直滚动。但是，当我执行 overflow-y: scroll 并为该部分设置高度时，如其他帖子所述。但是，当我这样做时，气泡只是包裹在截面 block 中？我认为这可能是因为该部分的 flex 装箱。有没有办法强制它垂直滚动而不是列/行换行？我对 CSS 比较陌生，所以请指出任何重复项。

CSS

html {
  font-family: 'PT Sans', Georgia, serif;
}

.discussion {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-flow: column wrap;
}

.discussion>.bubble {
  border-radius: 1em;
  padding: 0.25em 0.75em;
  margin: 0.0625em;
  max-width: 50%;
}

.discussion>.bubble.sender {
  align-self: flex-start;
  background-color: cornflowerblue;
  color: #fff;
}

.discussion>.bubble.recipient {
  align-self: flex-end;
  background-color: #efefef;
}

.discussion>.bubble.sender.first {
  border-bottom-left-radius: 0.1em;
}

.discussion>.bubble.sender.last {
  border-top-left-radius: 0.1em;
}

.discussion>.bubble.sender.middle {
  border-bottom-left-radius: 0.1em;
  border-top-left-radius: 0.1em;
}

.discussion>.bubble.recipient.first {
  border-bottom-right-radius: 0.1em;
}

.discussion>.bubble.recipient.last {
  border-top-right-radius: 0.1em;
}

.discussion>.bubble.recipient.middle {
  border-bottom-right-radius: 0.1em;
  border-top-right-radius: 0.1em;
}

EJS代码

<section class="discussion">

  <div class="bubble sender first">Hello</div>
  <div class="bubble sender last">This is a CSS demo of the Messenger chat bubbles, that merge when stacked together.</div>

  <div class="bubble recipient first">Oh that's cool!</div>
  <div class="bubble recipient last">Did you use JavaScript to perform that kind of effect?</div>

  <div class="bubble sender first">No, that's full CSS3!</div>
  <div class="bubble sender middle">(Take a look to the 'JS' section of this Pen... it's empty! 😃</div>
  <div class="bubble sender last">And it's also really lightweight!</div>

  <div class="bubble recipient">Dope!</div>

  <div class="bubble sender first">Yeah, but I still didn't succeed to get rid of these stupid .first and .last classes.</div>
  <div class="bubble sender middle">The only solution I see is using JS, or a &lt;div&gt; to group elements together, but I don't want to ...</div>
  <div class="bubble sender last">I think it's more transparent and easier to group .bubble elements in the same parent.</div>

</section>

Answer 1

您可以通过在 .discussion 周围添加一个包装器来解决这个问题<section>并添加 overflow-y: scroll在那里或只是通过删除 wrap来自 flex-flow: column wrap ，在这个例子中似乎没有必要:

body {
  font-family: monospace;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  height: 100vh;
}

.wrapper {
  overflow-y: scroll;
  width: 50vw;
  height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 32px rgba(0, 0, 0, .25);
  padding: 1em;
  box-sizing: border-box;
}

.discussion {
  display: flex;
  flex-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.discussion > .bubble {
  border-radius: 1em;
  padding: 0.5em;
  max-width: 66.6666%;
  box-sizing: border-box;
}

.discussion > .bubble + .bubble {
  margin-top: 1px;
}

.discussion > .bubble.last + .bubble.first {
  margin-top: 0.5em;
}

.discussion > .bubble.sender {
  align-self: flex-start;
  background-color: cornflowerblue;
  color: #fff;
}

.discussion>.bubble.recipient {
  align-self: flex-end;
  background-color: #efefef;
}

.discussion > .bubble.sender.first {
  border-bottom-left-radius: 0.1em;
}

.discussion > .bubble.sender.last {
  border-top-left-radius: 0.1em;
}

.discussion>.bubble.sender.middle {
  border-bottom-left-radius: 0.1em;
  border-top-left-radius: 0.1em;
}

.discussion > .bubble.recipient.first {
  border-bottom-right-radius: 0.1em;
}

.discussion > .bubble.recipient.last {
  border-top-right-radius: 0.1em;
}

.discussion > .bubble.recipient.middle {
  border-bottom-right-radius: 0.1em;
  border-top-right-radius: 0.1em;
}

<section class="wrapper">

  <ul class="discussion">
    <li class="bubble sender first">Hello</li>

    <li class="bubble sender last">This is a CSS demo of the Messenger chat bubbles, that merge when stacked together.</li>

    <li class="bubble recipient first">Oh that's cool!</li>

    <li class="bubble recipient last">Did you use JavaScript to perform that kind of effect?</li>

    <li class="bubble sender first">No, that's full CSS3!</li>

    <li class="bubble sender middle">(Take a look to the 'JS' section of this Pen... it's empty! 😃</li>

    <li class="bubble sender last">And it's also really lightweight!</li>

    <li class="bubble recipient">Dope!</li>

    <li class="bubble sender first">Yeah, but I still didn't succeed to get rid of these stupid .first and .last classes.</li>

    <li class="bubble sender middle">The only solution I see is using JS, or a &lt;div&gt; to group elements together, but I don't want to ...</li>

    <li class="bubble sender last">I think it's more transparent and easier to group .bubble elements in the same parent.</li>
  </ul>

</section>