Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="main">
- <div class="container">
- <div class="first">
- fixed size
- </div>
- <div class="second">
- <span>very very very very very very very long text</span>
- <span>other text</span>
- </div>
- <div class="third">
- 1000000000000000
- </div>
- </div>
- </div>
- * {
- box-sizing: border-box;
- }
- .main {
- width: 500px;
- height: 500px;
- border: 1px solid black;
- padding: 10px;
- }
- .container {
- display: flex;
- width: 100%;
- }
- .container div {
- display: flex;
- border: 1px solid black;
- }
- .first {
- flex: 0 0 100px;
- }
- .second {
- flex-direction: column;
- flex: 1;
- }
- span {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- border: 1px solid black;
- }
- .third {
- flex: 0 1 auto;
- }
Add Comment
Please, Sign In to add comment