Tips for preventing a column from extending beyond the edge of the browser window during resizing

Issue arises when I resize the browser window, causing the left box to extend beyond the browser boundary, making it impossible to see the contents even with the scrollbar below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
         body{
            background-color: rgb(238, 206, 236);
         }
         h1{
            text-align: center;
            background-color: rgb(250, 159, 250);
            color: purple;
            border-style: solid;
         }

         .row-container{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            margin: 20px;
         }
         .bilbo{
            display: flex;
            flex-direction: column;
            flex: 0 0 auto;
            background-color: rgb(238, 206, 236);
            color: black;
            padding: 10px;
            margin: 10px;
            border-style: solid;
            border-width: 0 5px;
            border-color: green;
            height: 425px;
            overflow-y: scroll;
         }
         #frodo{
            display: flex;
            flex-direction: row;
            justify-content: center;
         }
         button{
            vertical-align: top;
            height: 70px;
            width: 150px;
            background-color: #AAAAAA;
            border: 0.5px solid crimson;
            border-radius: 10px;
            padding: 20px;
            margin: 10px;
            text-decoration: none;
         }
         #penguin {
            color: white;
            border-radius: 25%;
            transition-property: border-radius,border,color,background-color;
            transition-duration: 0.1s;
            transition-timing-function: 0.1s;
            transition-delay: .3s;
            margin: 10px;
         }
         #penguin:hover {
            border-color: orange;
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <h1>Libre y Singular</h1>
      <div class="row-container">
         <section class="bilbo">
            <p>Hace muchos años me topé con algo realmente novedoso para mí, algo que podría haber conocido cuando sólo tenía 6 años y que a esa edad hubiera podido sacarle un enorme provecho gracias a las CR Tronic 360 de la empresa de mi padre, Typographics. Este algo con el que me crucé fue el Software Libre. Me resultó algo maravilloso, era mi primer contacto con el Software. Esto es algo raro, nunca conocí en toda mi vida el software privativo. Durante muchísimos años tuve una Commodore Amiga 500, máquina con la conocí qué era un sistema operativo. La primera vez que usé el diskette que lo levantaba me quedé maravillado, cuando descubrí que podía jugar con un sintetizador de voz con el que podía simular una computadora que hablara por si misma algo similar ocurrió. Pero no, no conocí el software privativo con la Amiga, existía en ese momento el AmigaBasic y yo ni noticia.</p>

            <p>Hoy en día podría ser uno de los mejores programadores del mundo si hubiese conocido el software libre o el privativo en conjunto con las CR Tronic 360 de Typographics. En realidad, me equivoqué más arriba al decir que era la empresa de mi padre. Era la empresa de muchos hombres, muchos empleados. Los conocía a todos, pues yo iba a la empresa a verlo a él. Con algunos de ellos tenía más simpatía que otros, a los dos que más recuerdo son a Mítolo, "el pitufo"; a Umberto; a Eduardo Barone; a Sergio, "la gallina". Ellos hacían la empresa, más allá de sus fundadores y dueños.</p>
         </section>
         <section class="bilbo">

            <p>No recuerdo haber nunca haber interactuado con las máquinas, sólo recuerdo verlas en una oficina, eran inmensas. En la casa de mi madre tenía robots, o por lo menos uno. No conocía aún la relación entre ellos y las CR Tronic 360. Nadie me hablaba de software.</p>

            <p>Entonces, tratando de ir un poco al grano, qué es lo libre y singular. Es algo que pensé en oposición a la singularidad. Vendría a ser la singularidad libre. Con esto entiendo un tipo de tecnología, que podría ser interpretada como inteligencia artificial, si es que tal cosa existe, construida con software libre. Para mí todo empieza con un debate, y si muchos hablan acerca del peligro de la singularidad y la inteligencia artificial es siempre mejor empezar con esta instancia.</p>
         </section>
         <section class="bilbo">
            <p>Hace mucho años registré por primera vez el dominio Free-Singularity.org, empezó siendo un debate y un juego. Creé una cadena pequeña de páginas web conectadas con hipervínculos binarios. ¿Qué quiere decir esto? Mejor ver el ejemplo, me cuesta encontrar las palabras. Esa cadena llegaba a una canción sobre el número pi en un sitio web de video streaming. Ahora sé un poco más de diseño web y puedo apostar a captar tráfico, hacer crecer en serio este lugar.</p>

            <p>La cuestión es que mientras sigue mi debate, ya surgió lo que algunos consideran inteligencia artificial. Me estoy quedando en el tiempo. Por el momento mi apuesta es no usarla, estudiarla, pero sin tocarla, escuchar lo que dicen mis amigos, mis compañeros en la facultad, los profesores, mi familia y ese etcétera mimado por Umberto Eco.</p>
         </section>
      </div>
      <section id="frodo">
         <nav class="links">
            <a href="https://free-singularity.org/typographics.html"><button id="penguin">Typograhics</button></a>
            <a href="https://free-singularity.org/CR_Tronic_360.html"><button id="penguin">CR Tronic 360</button></a>
            <a href="https://free-singularity.org/Amiga500.html"><button id="penguin">Commodore Amiga 500</button></a>
         </nav>
      </section>
   </body>
</html>

This is the provided code, untouched and unchanged.

To view the issue online, visit this link.

Answer №1

Implement the flex property to enable flexible shrinking and expanding of the column.

.frodo {
   flex: 1 1 300px; /* Include these specific values */
}
.container-row {
   flex-wrap: wrap; /* Ensure wrapping is added here */
}

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

Add a touch of vibrancy to the button background by incorporating two

Looking to apply two different background colors to my button. Here is the design I'm aiming for: Is it feasible to achieve this design using only CSS, or do you have any other suggestions? Appreciate your input! ...

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

What is the best way to align <h2> and <img> elements that are set to display as inline-block?

I've been experimenting with aligning h2 and img (icon) elements and although I added display: inline-block, they ended up shifting to the left of the section. Is there a way I can center them instead? HTML: <h2>Coffee</h2> <img src=&q ...

Multiline text that appears inline

Is there a way to achieve this output in HTML or using CSS? This is the text: A very long piece of content that wraps automatically onto multiple lines Take note of how the text wraps and aligns on the left side. I am aware that tables can be used for t ...

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

I currently have the following setup: .container { background: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { background: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20% ...

Attach a sticker to the input field

I want to position a label on top of an input tag permanently, rather than having it inside the input tag where it jumps to the top when clicked. Here is my attempted solution: input { font-size: 18px; padding: 10px 10px 10px 5px; -webkit-appeara ...

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

As someone who is still learning about web development, I find myself struggling with browser compatibility issues. It's frustrating to see my website looking different in Chrome compared to Safari. While I know that browsers interpret code differentl ...

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

How to enhance the design with a box-shadow for a :after pseudo element

One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow. Her ...

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

Is there a way to showcase images next to each other within an array in Angular 8, like having 2 images in a row and then another 2 in the next row?

Here is the HTML code I created and tested: <div class="row"> <div *ngFor="let url of urls" class="col-md-6"> <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"> </div> < ...

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

Steps for incorporating a storyline into a CSS Chart

I'm attempting to introduce a horizontal line at a specific point using chartscss.org For instance, on the given chart utilizing Charts CSS below, I'm aiming to include a horizontal line at 15.5... Similar to the illustration shown. I've e ...

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

The versatility of Node.js' hbs module as an engine

Recently diving into the world of node js, I stumbled upon the hbs module. In this code snippet below: app.set('view engine', 'html'); app.engine('html', require('hbs').__express); I'm curious to know more abo ...

Adding an HTML string to the head in Next.js

Every time I fetch data from an API, it returns an object with the property head: '<title>dummy title<title>' Despite trying different methods, I am unable to display this HTML string in the head tag. This is my code: <Head>{da ...

The masonry reorganization is behaving strangely

I've recently started using masonry for the first time and you can check it out here: Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in. For example, instead of placing a medium-sized ...

What is the method for displaying the word '<head>' within a <p> element in HTML code?

My HTML page contains a simple <p> tag. Within this tag, I am attempting to display some text in the following manner: Insert this code snippet into the website header, between <head> and </head>, to activate the functionality notice. ...

Creating a drop-down menu in HTML with PHP and MySQL integration

I'm currently working on populating a list into a drop-down menu, but right now it's displaying each name in its own separate drop-down. I'd like to have all the names listed in just one single drop-down instead. Any ideas on how I could ach ...