htmlcsspage-layout

How can I get an element to stay within the browser's window width when its content is wider?


I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.

What it's supposed to do is show a horizontal scrollbar.

What it's actually doing is expanding beyond the width of the window.

I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.

How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?


Solution

  • The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.