First there is a fixed-size div(cyan). Two div are in it. One is flex(pink), other is fixed size(gray). Two elements with long text are in the flex element. If text is long, I want pink and gray to fits inside cyan.
How can I do this?codepen is here.
.parent { background-color: cyan; width: 500px; height: 500px; color: red:; padding: 20px; display: flex; flex-direction: row;}.flex { flex: 1 1 auto; background-color: pink; display: flex; flex-direction: row; max-width: 100%;}.fixed { width: 50px; background-color: gray; height: 100%; flex: 0 0 auto;}.long-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex: 1; max-width: 50%;}<div class="parent"><div class="flex"><div class="long-text"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?</div><div class="long-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem qui, doloremque perferendis ducimus tempora facere, est, quisquam tenetur veritatis at earum eveniet minima numquam repellendus dolorum enim quos cupiditate quaerat?</div></div><div class="fixed"></div></div>