Create a row of flexbox items with a max height defined by one child [duplicate]

by

Flexbox can’t do that natively but it is possible.

You will need an inner element inside the second child which is positioned absolutely.

Here the extra content is/can be hidden with overflow:hidden…or revealed by adding overflow:auto.

.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border: 2px solid red;
}
.child {
  flex: 1;
  border: 2px solid green;
}
.child:nth-child(2) {
  position: relative;
  overflow: auto;
  /*overflow: hidden; */ /* removed for demo purposes */
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis tenetur, laboriosam! Ab facilis, officia id delectus eaque expedita quia, incidunt eligendi aut, minus temporibus tenetur.</div>
  <div class="child">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
    </div>
  </div>
</div>

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  3. Vertical Align Center in Bootstrap 4 [duplicate]
  4. Chrome / Safari not filling 100% height of flex parent
  5. Why is a flex item limited to parent size?
  6. What are the differences between flex-basis and width?
  7. Aligning grid items across the entire row/column (like flex items can)
  8. Make flex-grow expand items based on their original size
  9. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  10. How to make flexbox items the same size?
  11. How can I make Flexbox children 100% height of their parent?
  12. Scrolling a flexbox with overflowing content
  13. Usage of display property of flex box items
  14. How to align left last row/line in multiple line flexbox [duplicate]
  15. How to keep wrapped flex-items the same width as the elements on the previous row?
  16. What are the differences between flex-grow and width?
  17. Removing display:flex adds spaces around a link. Why?
  18. Padding-bottom/top in flexbox layout
  19. React native text going off my screen, refusing to wrap. What to do?
  20. How to use safe center with flexbox?
  21. Why isn’t my justify-content property working?
  22. Difference between flex-end and end? [duplicate]
  23. How can I create multi columns from a single unordered list?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  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. Horizontal masonry layout with flexbox CSS only [duplicate]
  29. CSS Flexbox: difference between align-items and align-content [duplicate]
  30. First-child full-width in Flexbox

Leave a Comment