grahamjpark/problem.md Secret

## problem.md

      
    Raw
  

              problem.md
            
          
    I designed a page layout that is responsive and adjusts fine to smaller screens, but when I added in a code block (and used highlight.js to format it), the responsiveness breaks. The code box and text content both spill over the width of the device and you have to scroll back and forth. Ideally, the code block should have its own scroll bar to view the code, but the content still adapts. I've tried playing around with different attributes of the flexbox that contains the content, but it still breaks the layout.
If I comment out both .article-container and article the page adjusts fine, but if either one of them is present it breaks. Also, if I leave the CSS as is and comment out the code block it's responsive.
The content in fullscreen mode
How mobile looks without CSS - the code box scrolls like it should, but the rest of the page adapts
How mobile looks with CSS
Note that 2 is also how the site looks with CSS and without the codeblock. So something about the way they are interacting is breaking.

  
## test.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.article-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

article {
    overflow: auto;  /* The Fix - https://stackoverflow.com/questions/49259598/flex-item-with-pre-content-not-shrinking */
    width: 800px;
}

## test.html
<!DOCTYPE html>

<head>
    <link rel='stylesheet' href='test.css' />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
    <div class="article-container">
        <article>
            <h1 class="title">Test</h1>
            <p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
                consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
            <pre><code>def some_code(file_name):
    with open("raw-posts/" + file_name + ".md", "r", encoding="utf-8") as input_file:
        return input_file.read()
</code></pre>
        </article>
    </div>

</body>

</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}


	.article-container {
	width: 100%;
	display: flex;
	justify-content: center;
	}

	article {
	overflow: auto; /* The Fix - https://stackoverflow.com/questions/49259598/flex-item-with-pre-content-not-shrinking */
	width: 800px;
	}
	<!DOCTYPE html>

	<head>
	<link rel='stylesheet' href='test.css' />
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
	</head>

	<body>
	<div class="article-container">
	<article>
	<h1 class="title">Test</h1>
	<p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
	consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
	<pre><code>def some_code(file_name):
	with open("raw-posts/" + file_name + ".md", "r", encoding="utf-8") as input_file:
	return input_file.read()
	</code></pre>
	</article>
	</div>

	</body>

	</html>