Scrolling Nested Div, with Sometimes Present Auto Width Div

Question

I currently am trying to figure out how to accomplish this:

The green box would have contents that may be greater than the width, and so the div needs to scroll horizontally, if longer than space available.

The red box may or may not be present, and can have a variable number of elements. If I have to make it a fixed width box, I can, if necessary.

The overall width however for the grey box can't be more than 100%.

from the duplicate: https://stackoverflow.com/a/25117686/8620333 — Temani Afif, Jan 16 '21 at 22:59
@TemaniAfif If you read this question it is slightly different than the question you refer to. This question has an additional part that your referred question does not. Your referred question only focuses on the horizontal space where this question also has the right column that can be flexible or not exist at all. — whoacowboy, Jan 16 '21 at 23:09
@whoacowboy fill remaining space means take all the space available (either there an additionnal element or not). — Temani Afif, Jan 16 '21 at 23:12

whoacowboy · Answer 1 · 2021-01-16T23:17:43.123

I would use flexbox css.

.outer{ 
  width: 90%;
  background-color: #C4C4C4;
  height: 40px;
  border: 10px solid #C4C4C4;
  display: flex;
  flex-flow: row no-wrap;
}
.left {
  flex-grow: 1;
  background-color: #9BB18C;
  height: 40px;
  overflow-x: scroll;
 
}
.right {
  flex-shrink: 1;
  background-color: #D6514B;
  height: 40px;
  margin-left: 10px;
}

<div class="outer">
<div class="left">
  <div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">
YYYYYYY</div>
</div>
<br/><br/>

<div class="outer">
<div class="left">
  <div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">YYY</div>
</div>

there is no value called flex-grow or flex-shrink for the flex property and you solution won't work in case the left element contain only few text — Temani Afif, Jan 16 '21 at 23:13
and now your answer is exactly the same as the one I linked above so you confirm it's a perfect duplicate — Temani Afif, Jan 16 '21 at 23:19

Scrolling Nested Div, with Sometimes Present Auto Width Div

1 Answers1