Issue when centering vertically with flexbox when heights are unknown

by

I found the solution:

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}


html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen: http://codepen.io/ces/pen/Idklh

More Related Contents:

  1. Height 100% on flexbox column child [duplicate]
  2. firefox overflow-y not working with nested flexbox
  3. Div height 100% and expands to fit content [duplicate]
  4. Make a div span two rows in a grid
  5. CSS – why doesn’t percentage height work? [duplicate]
  6. Better way to set distance between flexbox items
  7. What’s the difference between align-content and align-items?
  8. Setting width/height as percentage minus pixels
  9. How does flex-shrink factor in padding and border-box?
  10. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  11. Margin collapsing in flexbox
  12. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  13. How to change flexbox wrap?
  14. Create a Masonry grid with flexbox (or other CSS)
  15. css grid of squares with flexbox
  16. Set flexbox children to have different heights to use up available space
  17. Flexbox affects overflow-wrap behavior
  18. Prevent flex item from exceeding parent height and make scroll bar work
  19. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  20. Overflow to left instead of right
  21. How can I change the order of Bootstrap columns?
  22. The difference between flex:1 and flex-grow:1
  23. How do I set distance between flexbox items?
  24. How to control number of items per row using media queries in Flexbox?
  25. How to exclude the first item in a flexbox wrap?
  26. Row Wrap in flex-box not wrapping in Safari
  27. ml-auto is not pushing navbar links to the right
  28. CSS Flexbox: difference between align-items and align-content [duplicate]
  29. overflow: hidden on div and body, different behavior
  30. First-child full-width in Flexbox

Leave a Comment