Amodar Amodar - 1 month ago 4x
CSS Question

Div on the left needs to overflow when it collides with div on the right

I've made 3 examples of what I'd like to achieve.
I have 2 divs side by side in a wrapper that has 100% as width, the left div has a width of 100% minus the width of the righter div, the righter div has an auto width.

When the left div text isn't long enough to hit the righter div, the left div should extend till the righter div.

enter image description here

When the content in the left div is too long, it should overflow to a new line, the righter div will keep it's width.

First image

When the content increases in righter div, the left div should adjust its width and overflow if needed.

enter image description here

Is there a way to do this without javascript and preferably without flex?


You can use flex for that:

.wrapper {
  background: red;
  display: flex;
  align-items: flex-start;

.left {
  background: gray;
  flex: 1;

.right {
  background: green;
  width: 150px;
<div class="wrapper">
  <div class="left">
    Lorem ipsum
  <div class="right">
    Lorem ipsum