flex-item-vertical-padding-relative-to-flex-container-width.html 333 B

1234567891011121314151617181920
  1. <style>
  2. * {
  3. border: 1px solid black;
  4. }
  5. .flex-container {
  6. display: flex;
  7. width: 600px;
  8. height: 10px;
  9. }
  10. .flex-item {
  11. background: orange;
  12. box-sizing: border-box;
  13. min-height: 200px;
  14. padding-top: 10%;
  15. padding-bottom: 20%;
  16. }
  17. </style>
  18. <body>
  19. <div class="flex-container">
  20. <div class="flex-item">foo</div>