将div堆叠在一起，文本溢出到顶部

Question

Here is the layout

<div id="wrapper">
  <div id="div1">
    <span> Hello</span>
  </div>
  <div id="div2">
  <span> Content in this box should be pushed to the top as you reduce page size</span>
  </div>
</div>

I have two divs div1 and div2 wrapped in a wrapper. The wrapper should be psitioned at the bottom left corner of the window. When a user resizes their window i would want the text in div 2 to overflow top the top instead of the default of moving the text the next line ( downwards) I want to text to move to the previous line ( upwards) and essentially push the Hello in div 1 upwards.

Basically the reverse of having top div stacked to the top and having the content pushed down as the screen is resized.

Image that the dashed line is the bottom of the window, thenI would want the behavior like so

  Hello
  Content in this box
  should be pushed to
  the top as you reduce
  page size
  ---------------------

However currently the div follow the normal behavior of sending the overlowed text to the next line like so ( Behavior I dont want)

   Hello
   Content in this box should
   ------------------------
   be pushed to the top as you
   reduce page size

Answer 1

Something like this? https://jsfiddle.net/tuk50ooy/

 #wrapper{bottom:0;position:absolute;} @media only screen and (max-width : 480px) { #wrapper{position:relative;} } 

 <div id="wrapper"> <div id="div1"> <span> Hello</span> </div> <div id="div2"> <span> Content in this box should be pushed to the top as you reduce page size</span> </div> </div> 

Answer 2

If I understand correctly, this should be default behaviour in an absolute positioned wrapper. Either check the JSFiddle or the snippet in full screen:

 #wrapper { position: absolute; bottom: 5px; left: 5px; width: 50%; background: orange; padding: 5px; } 

 <div id="wrapper"> <div id="div1"> <span> Hello</span> </div> <div id="div2"> <span> Content in this box should be pushed to the top as you reduce page size</span> </div> </div>