0

I have three divs side-by-side. The left one should occupy 25% of the screen. The middle one should occupy a fixed size, let's say 50 pixels (that may change). The third one should occupy the remaining space, but not exceed the size of the screen. When I load a big image on it, it exceeds the screen. I have tried flex: 1 1 auto; and flex-shrink: 1; but both are useless. I want the scrollbar to appear on the d3 div, not on body.

body {
  display: flex;
  margin: 0;
  width: 100%;
}
#d1 {
  background-color: red;
  flex: 1 0 auto;
  width: 25%;
}
#d2 {
  background-color: green;
}
#d3 {
  background-color: blue;
  flex-shrink: 1;
}
#d3a {
  background-color: cyan;
  margin: 1em;
  width: 1000px;
}
<div id='d1'>
1
</div>
<div id='d2'>
2
</div>
<div id='d3'>
  <div id='d3a'>
  3a
  </div>
</div>
Rodrigo
  • 4,706
  • 6
  • 51
  • 94

1 Answers1

-2

The first child has to have no flex, and only the width (in %). The second child will have no flex either, and a width in px (since you want it fixed). And finally, the third child will have flex: 1, in order to take all the space left.

If the image is making the third child wider than the screen, put a width: 100%.

Chere
  • 57
  • 1
  • 7