Scrolled window child contents showing on other widgets when resizing window in scrolled state

[Pramathesh Ambasta <pramathesh ambasta gmail com>]

Hi. I am new to programming and gtk+

I am trying to implement a small application using GTK 3.0, glade and
Anjuta.

The ui consists of a main window, a grid in which are packed a File
ChooserWidget (above) and a scrolled window below. The scrolled window
has a layout or a drawing area with a viewport as a child.

In the layout or the drawing area, a cairo context is obtained by making
a call to gdk_cairo_create.

The main window's configure event sizes the cairo context and the
layout/drawing area to display text in a font face at a large size. The
scrolled window is set to vexpand. As the height of the layout
increases, its contents can be scrolled as is expected. 

When I 
a. vertically scroll the window
and
b. resize the main toplevel window using the resize grip, 

I see the cairo context which is hidden by the scrolled window  "peep
out" and appear over the file chooser widget. When I release the grip,
the content disappears but some traces remain

If I shift the scrolled window to the right of the file chooser, I can
see the contents of the scrolled window move around under the file
chooser widget

Idea is to eventually develop an app which affords a preview of some
file as the user clicks on the file chooser. However, I am stuck because
I can't figure out what is going on.

Help will be greatly appreciated

Thanks in advance