-3

I have a container div that contains another container. I want my outer container to take up the space needed if screen size allows it to do so but I keep getting a scrollbar none the less.

.outer {
  padding: 16px;
  color: black;
  background: white;
  overflow: auto;
  border: 1px solid black;
  display: block;
} 
<div class="outer">
  <div class="inner">
    Some content...
  </div>
</div>

inner div has no styling and defaults to display block;

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Maria
  • 81
  • 8
  • Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – Rob Apr 24 '20 at 14:20
  • *I want my outer container to take up the space needed if screen size allows it to do so* space needed for what ? what space vertical or horizontal ? – Rainbow Apr 24 '20 at 14:30
  • Maybe this helps: https://stackoverflow.com/questions/45948202/make-div-expand-to-take-all-the-available-space – C-lara Apr 24 '20 at 14:38
  • Horizontal. It's a tooltip of which the content is approximately 400px wide but the tooltip takes up approximately 100px although there is space for it to take up more. – Maria Apr 24 '20 at 14:41
  • @C-lara Unfortunately no.. – Maria Apr 24 '20 at 15:01
  • @Maria and you want it always to grow with screen or to you want to stop at 400 px when the screen is e.g. 800 px? – C-lara Apr 24 '20 at 15:11
  • @C-lara I want to have a max-width of i.e. 400 px. – Maria Apr 24 '20 at 18:30

2 Answers2

2

If you want to let the div grow with the content, you can define it like that: Don't define width and/or height, then the div element grows along with its content. But the content must not be set to absolute! If the content is set to float, you have to set to the container to

overflow:hidden

then it will grow with content. You can still define a max-with: 

max-width: 400px;

Hope that helps!

C-lara
  • 115
  • 8
  • Well. This helps for setting a container of a specific width with scrollable content but unfortunately that's not what I'm after. If the content is less then 400px in I don't want the container to take up 400ps. Let's say the content take up 50 px I want the container to be 50px wide. – Maria Apr 24 '20 at 18:33
  • Thanks @C-lara I still have the problem of the container not taking up as much space as possible though. The container is approximately 20px wide although the content is 100px. I tried adding width: 100% but then I get a lot of white-space after the content. – Maria Apr 25 '20 at 12:54
  • Maybe you can play around a bit with the percentage... Try 80%, 60%, 40%... But take in mind that this becomes a bit more complicated when you want to have a responsive design. You may end up defining the width for different screen sizes. – C-lara Apr 25 '20 at 16:08
0

I figured it out. There was a position absolute deep down inside a div inside my container div. That's why the content would not expand.

Maria
  • 81
  • 8