Ways to create a div that scrolls and overflows within another div using flex:1

Is it possible to make source code contained within <pre> tags scroll horizontally when the browser window is resized? The pre tags are placed inside a flex box, with the containing div set to flex: 1.

If so, how can this be achieved?

<div style="display: flex;">
  <div style="flex: 1;">
    <div style="max-width: 100%; overflow-x: auto; min-width: 0;">
      <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        </pre>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

<div style="flex: 1; width:10px;">

To prevent overflow issues with flex children, it's important to give them a base width. When using flex:1, providing a width will allow the child to adjust its width within the flex container. This ensures that percentage widths work correctly and prevents breaking out in cases where there is no fixed parent width. Keep in mind that in browsers that do not support flex, you may need to adjust the specified width (you can change 10px to any value).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose the offspring of an element using jQuery

Currently, I have a function set up to open a modal dialog and populate it with information from the 'dblclicked' node: $(function(){ $(".delete").live('dblclick', function () { var id = $(this).attr('id'); ...

javascriptjqueryhtml

JQuery keyup event - troubleshooting show/hide errors

There seems to be a problem with the jQuery keyup function. Currently, when data is entered into one field, errors in all other fields are hidden. However, the desired behavior is to show or hide only the error message for the specific field being interact ...

htmljquerycss

Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off. The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed. Currently, the tex ...

htmlcss

SVG - Various images displaying unique characteristics

Trying to create a visual graphic with two images, one representing an empty state and the other a filled state. The challenge is determining how to adjust the width of only one image while keeping them the same height using a clip path. For example, I w ...

htmlcsssvg

Alignment issue: table-cell elements are not lining up correctly

Curious as to why the containers on this page seem misaligned. Any assistance would be greatly appreciated. Thank you. http://codepen.io/anon/pen/jpmtz ...

htmlcss

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

htmlcsspseudo-element

Unable to operate a playlist application

I am currently facing an issue while trying to run a small application using an HTML kit. The application consists of two forms - one for text input and the other for a button. The goal is to save the text entered in the text input form into a list when th ...

javascripthtml

I possess a certain input and am seeking a new and distinct output

I am looking to insert a word into an <input> and see an altered output. For example, Input = Michael Output = From Michael Jordan function modifyOutput() { var inputWord = document.getElementById("inputField").value; var outputText = "print ...

javascripthtml

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...

htmlcsstwitter-bootstrap

Angular is not displaying the data from the dynamically injected component in the main component

I have encountered an issue where I am attempting to showcase a component's HTML view within another component in a chatbot scenario. Let's refer to them as the chat component and component 2. Essentially, the chat component – responsible for r ...

htmlangulartypescriptangular-dynamic-componentsng-component-outlet

What are the advantages of storing data in HTML tags that do not contain any content?

Is it considered poor practice to include an empty span in a template, or is there a more effective solution available? Is it acceptable to use a blank span tag like this within my code? <span class="stored-id-number" data-idnumber="1234"><!-- em ...

javascriptjqueryhtml

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this: <ul> <li id="projectrow_364"> <span>Forest</span> </li> <li id="projectrow_365"> <span>Life</span> ...

jquerycss

Steps for rendering Emoji in React Application

I'm looking to integrate emojis into my webpage within a React chat app. The idea is to provide users with a list of emojis to choose from. How can I use codes like '1F683' to display emojis on the page, particularly with support for Chrome? ...

cssreactjsunicodeemoji

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

using jquery to trap anchor in unordered list items

This section is dedicated to the menu on the website. The code for this menu can be found in the _Layout.cshtml() page. When the 'Neu Gesellschaft' page loads, I want to change the CSS of the anchor tag a. I attempted the following jQuery code: ...

jqueryhtmlcss

Tips for creating text that changes size based on the container dimensions

I am looking for a way to ensure that the content within a div container remains neatly contained without overflowing. How can I make the container responsive so that it adjusts its size based on dynamic text? .element { display: inline- ...

javascriptjqueryhtmlcss

transforming the use of getelementbyid into a plural form

Can a getElementById function work in plural context? Or would I need a different function or maybe jQuery? <script type="text/javascript> window.onload = function() { var test = document.getElementById('test'); if ...

javascriptjqueryhtmlcssgetelementbyid

Steps to display text in a div upon clicking on an image

I am trying to create an image with two DIVs separated by a black line. The left DIV will contain 4 images, and I want the following functionality: When a user clicks on any of the buttons in the left DIV, a corresponding text should be revealed in the ri ...

javascriptjqueryhtml