Tue. May 30th, 2023

[ANSWERED] html – Scrolling Nested Div, with Sometimes Present Auto Width Div

By

Nov 19, 2022 css, html, reactjs

Solution 1 :

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>

Problem :

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%.

Comments

Comment posted by stackoverflow.com/a/25117686/8620333

from the duplicate:

Comment posted by whoacowboy

@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.

Comment posted by Temani Afif

@whoacowboy fill remaining space means take all the space available (either there an additionnal element or not).

Comment posted by Temani Afif

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

Comment posted by whoacowboy

@TemaniAfif Typing fast. Updated my answer.

Comment posted by Temani Afif

and now your answer is exactly the same as the one I linked above so you confirm it’s a perfect duplicate

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022