CODEWITHSUNDEEP
htmlcss
Sunil
Sunil

Reputation: 21396

Inner div not taking the whole scroll width of outer div

I have a sample using html and CSS at following link: https://js.do/sun21170/inner-width-not-taking-whole-of-outer-width

The problem is that the inner div with a greenish background color is not taking the whole scroll width of outer div.

Question : Is there some CSS that I can use to make the inner div style apply across the whole scroll width of outer div other than setting the width of inner div to something like 150% or so?

Sample code that I am using is as below.

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>

<style>
.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   width:100%;
}
</style>

Upvotes: 2

Views: 2505

Answers (3)

govizlora
govizlora

Reputation: 99

You can also use flex box for the outer container by adding this:

display: flex;
flex-direction: column;
align-items: flex-start;

Working example: 

.outerDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  overflow: auto;
}

.innerDiv {
  background-color: lightgreen;
  white-space: nowrap;
}

.innerDiv2 {
  background-color: lightpink;
  white-space: nowrap;
}
<div class="outerDiv">
  <div class="innerDiv">
    This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div
  </div>
  <div class="innerDiv2">
    This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div
  </div>
</div>

Upvotes: 0

Elharony
Elharony

Reputation: 981

Well, you can do as @andreas suggested above:~~

  • Add display: inline-block to .innerDiv
  • Remove width: 100% from .innerDiv

Or... If you want to avoid that overflow effect, you can remove white-space: nowrap from your .innerDiv class!

One question; When you have 2 .innerDiv do you want them to stack below each other? If so, do you want both of them to have a stretched background to the end of the .outerDiv?

EDIT: Your problem wasn't clear enough for me at the beginning, but now I've understood what you really need to achieve, and here are 2 solutions:

#1 Solution: table-row

.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   display: table-row; /* <-- Add this */
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
}
<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
     <div class="innerDiv">
      This is inner div This is inner div This is inner div   
    </div>
</div>

#2 Solution: Relative & Absolute position!

NOTE: This can be used without position: relative and position: absolute, just use display: inline-block in .wrapperDiv and it will be the same!

.outerDiv {
   position: relative; /* <-- Add this */
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.wrapperDiv { 
   position: absolute; /* <-- Add this */
}
.innerDiv {
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
}
<div class="outerDiv">
   <div class="wrapperDiv"> <!-- Add This -->
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
     <div class="innerDiv">
      This is inner div This is inner div This is inner div   
    </div>
   </div>
</div>

Hope you find this helpful!

Upvotes: 1

andreas
andreas

Reputation: 16936

Yes, simply set the .innerDiv to display: inline-block;. This way, the .innerDiv behaves like an inline element, which is always as wide as its content, if you don't specify a width.

Here is the working example:

.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   display: inline-block; /* ← this does the trick */
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   /* width: 100%; ← this has to be removed */
}
<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>

Upvotes: 5

Related Questions