CODEWITHSUNDEEP
htmlcssflexboxoverflow
moonlight-hollow
moonlight-hollow

Reputation: 47

CSS Flexbox: can't scroll to overflown content

What I'm trying to build:

Essentially, a collection of vertically and horizontally divs that have content, using flexbox - pretty straightforward.

My issue:

When I start adding content - and the content starts exceeding the window, I can't seem to reach it: I can't scroll up or down to look at overflown content.

My build:

This is what my body looks like,

<body>

  <div id="flex-container">

    <div class="content">

      <!-- content and other stuff -->

    </div>

    <div class="content">

      <!-- content and other stuff -->

    </div>

  </div>

<body>

And this is what my style.css looks like,

#flex-container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
}

.content{
  width:75%;
}

I have tried setting overflow properties to no avail. If I don't add the height:100%; the content doesn't get centered vertically. Thank you in advance!

Upvotes: 0

Views: 50

Answers (1)

uchethecreator
uchethecreator

Reputation: 11

You can add overflow: auto; to the div, this will add a scroll bar to see the extra overflown content

Upvotes: 1

Related Questions