How to stretch children to fill cross-axis?

by

  • The children of a row-flexbox container automatically fill the container’s vertical space.

  • Specify flex: 1; for a child if you want it to fill the remaining horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
  flex: 1;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
  • Specify flex: 1; for both children if you want them to fill equal amounts of the horizontal space:
.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>div {
  flex: 1;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

More Related Contents:

  1. Fill remaining vertical space with CSS using display:flex
  2. How does flex-wrap work with align-self, align-items and align-content?
  3. Flex-box: Align last row to grid
  4. Text in a flex container doesn’t wrap in IE11
  5. Better way to set distance between flexbox items
  6. Align 3 unequal blocks left, center and right
  7. How does flex-shrink factor in padding and border-box?
  8. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  9. How can I align one item right with flexbox?
  10. What does flex: 1 mean?
  11. My position: sticky element isn’t sticky when using flexbox
  12. Margin collapsing in flexbox
  13. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  14. Every item to have the same width as the widest element [duplicate]
  15. How can I make a div span multiple rows and columns in a grid?
  16. Flexible box model – display : flex, box, flexbox? [duplicate]
  17. firefox overflow-y not working with nested flexbox
  18. Prevent flex item from exceeding parent height and make scroll bar work
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. CSS3 Flexbox: display: box vs. flexbox vs. flex
  22. Flex auto margin not working in IE10/11
  23. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  24. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  25. The difference between flex:1 and flex-grow:1
  26. How to control number of items per row using media queries in Flexbox?
  27. Vertically center items with flexbox
  28. How to fix unexpected column order in bootstrap 4?
  29. Issue when centering vertically with flexbox when heights are unknown
  30. Do I not understand the flex-grow property?

Leave a Comment