Guest User

Untitled

a guest
Jul 17th, 2018
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.74 KB | None | 0 0
  1. <div class="main">
  2. <div class="container">
  3. <div class="first">
  4. fixed size
  5. </div>
  6. <div class="second">
  7. <span>very very very very very very very long text</span>
  8. <span>other text</span>
  9. </div>
  10. <div class="third">
  11. 1000000000000000
  12. </div>
  13. </div>
  14. </div>
  15.  
  16. * {
  17. box-sizing: border-box;
  18. }
  19.  
  20. .main {
  21. width: 500px;
  22. height: 500px;
  23. border: 1px solid black;
  24. padding: 10px;
  25. }
  26.  
  27. .container {
  28. display: flex;
  29. width: 100%;
  30. }
  31.  
  32. .container div {
  33. display: flex;
  34. border: 1px solid black;
  35. }
  36.  
  37. .first {
  38. flex: 0 0 100px;
  39. }
  40.  
  41. .second {
  42. flex-direction: column;
  43. flex: 1;
  44. }
  45.  
  46. span {
  47. white-space: nowrap;
  48. overflow: hidden;
  49. text-overflow: ellipsis;
  50. border: 1px solid black;
  51. }
  52.  
  53.  
  54. .third {
  55. flex: 0 1 auto;
  56. }
Add Comment
Please, Sign In to add comment