Flexbox not behaving as expected with elements inside

Using flexbox has been instrumental in making my webpage responsive and positioning elements, but I've encountered an issue where the text within the containers is overflowing. https://i.sstatic.net/jH9tl.png

I'm striving to keep all text neatly contained within their designated divs, but they persist in spilling out onto the page. What could be causing this problem?

html

 <div class='boxes-top'>
        <div class='box-1'>
            <h4>The Historical Carousel</h4>
            <p>Perfect for private parties or an impromptu ride,
                this historic icon pairs perfectly with treats from the vintage
                soda-fountain located inside.</p>
            <p>Phone: (310) 394-8042</p>
        </div>
        <div class='box-2'>
            <h4>Playland Arcade</h4>
            <p>For kids and kids at heart, this classic arcade will 
                indulge all your nostalgia and test all your skills. 
                Skeeball is only the beginning.</p>
            <p>Phone: (310) 451-5133</p>
        </div>
        <div class='box-3'>
            <h4>Santa Monica Pier Aquarium</h4>
            <p>The hidden gem of the Pier, Heal the Bay’s public marine-education 
                 center is hands-on fun tucked just underneath the historic Carousel building.</p>
            <p>Phone: (310) 393-6149</p>
        </div>
    </div>
    <div class='boxes-bottom'> 
        <div class='box-1'>
            <h4>Marlene's Beach Comber</h4>
            <p>This is your one-stop beach shop for sunscreen, towels, beach mats and more. 
                If the Beachcomber doesn’t have it, it may not exist.</p>
            <p>Phone: (310) 260-8744</p>
        </div>
        <div class='box-2'>
            <h4>Pier Bait and Tackle</h4>
            <p>Yes, you can fish at the Pier! And whether you’re a regular or want to try your 
                 hand at this relaxing past-time for the day, the Bait & Tackle shop has your needs covered.</p>
            <p>Phone: (310) 576-2014</p>
        </div>
        <div class='box-3'>
            <h4>Live music & dancing at Rusty's</h4>
            <p>When the sun dips on your day at the beach, stay for some all-American live rock and drink 
                specials at Rusty's.</p>
            <p>Phone: (310) 393-7437</p> 
        </div>
    </div>

css

.boxes-top{
    display: flex;
} 

.boxes-top div{
    padding: 10px;
}

.boxes-bottom{
    display: flex;
} 

.boxes-bottom div{
    padding: 10px;
}

.box-1 {
    flex: 1;
    height: 150px;
    background-color: yellow;
}

.box-2 {
    flex: 1;
    height: 150px;
    background-color: teal;
}

.box-3 {
    flex: 1;
    height: 150px;
    background-color: grey;
}
htmlcssflexbox

Answer №1

To optimize the display of your boxes, consider adjusting the height attribute to "auto" instead of specifying a fixed height like 150px. By setting a specific height, you are limiting the size of the box itself rather than allowing it to expand based on the content within. Using "auto" will ensure that the boxes adjust accordingly to fit their content properly. I hope this explanation proves helpful.

.box-1 {
  flex: 1;
  height: auto;
  background-color: yellow;
}

.box-2 {
  flex: 1;
  height: auto;
  background-color: teal;
}

.box-3 {
  flex: 1;
  height: auto;
  background-color: grey;
}

Answer №2

Your containers are not able to expand, which goes against the main concept of using flex properties. Instead of setting a fixed height, it would be more beneficial to utilize min-height property. This way, the boxes can grow according to their content while maintaining a minimum height of at least 150px:

.boxes-top {
  display: flex;
}

.boxes-top div {
  padding: 10px;
}

.boxes-bottom {
  display: flex;
}

.boxes-bottom div {
  padding: 10px;
}

.box-1 {
  flex: 1;
  min-height: 150px;
  background-color: yellow;
}

.box-2 {
  flex: 1;
  min-height: 150px;
  background-color: teal;
}

.box-3 {
  flex: 1;
  min-height: 150px;
  background-color: grey;
}
<div class='boxes-top'>
  <div class='box-1'>
    <h4>The Historical Carousel</h4>
    <p>Perfect for private parties or an impromptu ride, this historic icon pairs perfectly with treats from the vintage soda-fountain located inside.</p>
    <p>Phone: (310) 394-8042</p>
  </div>
  <div class='box-2'>
    <h4>Playland Arcade</h4>
    <p>For kids and kids at heart, this classic arcade will indulge all your nostalgia and test all your skills. Skeeball is only the beginning.</p>
    <p>Phone: (310) 451-5133</p>
  </div>
  <div class='box-3'>
    <h4>Santa Monica Pier Aquarium</h4>
    <p>The hidden gem of the Pier, Heal the Bay’s public marine-education center is hands-on fun tucked just underneath the historic Carousel building.</p>
    <p>Phone: (310) 393-6149</p>
  </div>
</div>
<div class='boxes-bottom'>
  <div class='box-1'>
    <h4>Marlene's Beach Comber</h4>
    <p>This is your one-stop beach shop for sunscreen, towels, beach mats and more. If the Beachcomber doesn’t have it, it may not exist.</p>
    <p>Phone: (310) 260-8744</p>
  </div>
  <div class='box-2'>
    <h4>Pier Bait and Tackle</h4>
    <p>Yes, you can fish at the Pier! And whether you’re a regular or want to try your hand at this relaxing past-time for the day, the Bait & Tackle shop has your needs covered.</p>
    <p>Phone: (310) 576-2014</p>
  </div>
  <div class='box-3'>
    <h4>Live music & dancing at Rusty's</h4>
    <p>When the sun dips on your day at the beach, stay for some all-American live rock and drink specials at Rusty's.</p>
    <p>Phone: (310) 393-7437</p>
  </div>
</div>

Answer №3

Eliminate the fixed height constraint on the boxes and streamline your CSS by assigning the same class name to common elements:

.boxes {display: flex}
.box{flex: 1; padding: 10px}
.box-1 {background-color: yellow}
.box-2 {background-color: teal}
.box-3 {background-color: grey}
<div class='boxes boxes-top'>
  <div class='box box-1'>
    <h4>The Historical Carousel</h4>
    <p>Perfect for private parties or an impromptu ride, this historic icon pairs perfectly with treats from the vintage soda-fountain located inside.</p>
    <p>Phone: (310) 394-8042</p>
  </div>
  <div class='box box-2'>
    <h4>Playland Arcade</h4>
    <p>For kids and kids at heart, this classic arcade will indulge all your nostalgia and test all your skills. Skeeball is only the beginning.</p>
    <p>Phone: (310) 451-5133</p>
  </div>
  <div class='box box-3'>
    <h4>Santa Monica Pier Aquarium</h4>
    <p>The hidden gem of the Pier, Heal the Bay’s public marine-education center is hands-on fun tucked just underneath the historic Carousel building.</p>
    <p>Phone: (310) 393-6149</p>
  </div>
</div>
<div class='boxes boxes-bottom'>
  <div class='box box-1'>
    <h4>Marlene's Beach Comber</h4>
    <p>This is your one-stop beach shop for sunscreen, towels, beach mats and more. If the Beachcomber doesn’t have it, it may not exist.</p>
    <p>Phone: (310) 260-8744</p>
  </div>
  <div class='box box-2'>
    <h4>Pier Bait and Tackle</h4>
    <p>Yes, you can fish at the Pier! And whether you’re a regular or want to try your hand at this relaxing past-time for the day, the Bait & Tackle shop has your needs covered.</p>
    <p>Phone: (310) 576-2014</p>
  </div>
  <div class='box box-3'>
    <h4>Live music & dancing at Rusty's</h4>
    <p>When the sun dips on your day at the beach, stay for some all-American live rock and drink specials at Rusty's.</p>
    <p>Phone: (310) 393-7437</p>
  </div>
</div>

Answer №4

Get rid of the height constraints on your containers.

.boxes-top{
    display: flex;
    margin: 1px;
} 

.boxes-top div{
    padding: 10px;
}

.boxes-bottom{
    display: flex;
    margin: 1px;
} 

.boxes-bottom div{
    padding: 10px;
}

.box-1 {
    flex: 1; 
    background-color: yellow;
}

.box-2 {
    flex: 1; 
    background-color: teal;
}

.box-3 {
    flex: 1; 
    background-color: grey;
}
<div class='boxes-top'>
        <div class='box-1'>
            <h4>The Historical Carousel</h4>
            <p>Perfect for private parties or an impromptu ride,
                this historic icon pairs perfectly with treats from the vintage
                soda-fountain located inside.</p>
            <p>Phone: (310) 394-8042</p>
        </div>
        <div class='box-2'>
            <h4>Playland Arcade</h4>
            <p>For kids and kids at heart, this classic arcade will 
                indulge all your nostalgia and test all your skills. 
                Skeeball is only the beginning.</p>
            <p>Phone: (310) 451-5133</p>
        </div>
        <div class='box-3'>
            <h4>Santa Monica Pier Aquarium</h4>
            <p>The hidden gem of the Pier, Heal the Bay’s public marine-education 
                 center is hands-on fun tucked just underneath the historic Carousel building.</p>
            <p>Phone: (310) 393-6149</p>
        </div>
    </div>
    <div class='boxes-bottom'> 
        <div class='box-1'>
            <h4>Marlene's Beach Comber</h4>
            <p>This is your one-stop beach shop for sunscreen, towels, beach mats and more. 
                If the Beachcomber doesn’t have it, it may not exist.</p>
            <p>Phone: (310) 260-8744</p>
        </div>
        <div class='box-2'>
            <h4>Pier Bait and Tackle</h4>
            <p>Yes, you can fish at the Pier! And whether you’re a regular or want to try your 
                 hand at this relaxing past-time for the day, the Bait & Tackle shop has your needs covered.</p>
            <p>Phone: (310) 576-2014</p>
        </div>
        <div class='box-3'>
            <h4>Live music & dancing at Rusty's</h4>
            <p>When the sun dips on your day at the beach, stay for some all-American live rock and drink 
                specials at Rusty's.</p>
            <p>Phone: (310) 393-7437</p> 
        </div>
    </div>

If you want uniform responsive boxes without height restrictions, add a parent wrapper instead of dividing into two parts.

.boxes-top{
    display: flex;
    flex-wrap: wrap;
} 
.boxes{ 
    height: 200px;
    width: 200px;
    background-color: darkcyan;
    margin: 1px;
    padding: 10px;
}
<div class='boxes-top'>
        <div class='boxes box-1'>
            <h4>The Historical Carousel</h4>
            <p>Perfect for private parties or an impromptu ride,
                this historic icon pairs perfectly with treats from the vintage
                soda-fountain located inside.</p>
            <p>Phone: (310) 394-8042</p>
        </div>
        <div class='boxes box-2'>
            <h4>Playland Arcade</h4>
            <p>For kids and kids at heart, this classic arcade will 
                indulge all your nostalgia and test all your skills. 
                Skeeball is only the beginning.</p>
            <p>Phone: (310) 451-5133</p>
        </div>
        <div class='boxes box-3'>
            <h4>Santa Monica Pier Aquarium</h4>
            <p>The hidden gem of the Pier, Heal the Bay’s public marine-education 
                 center is hands-on fun tucked just underneath the historic Carousel building.</p>
            <p>Phone: (310) 393-6149</p>
        </div>
        <div class='boxes box-4'>
            <h4>Marlene's Beach Comber</h4>
            <p>This is your one-stop beach shop for sunscreen, towels, beach mats and more. 
                If the Beachcomber doesn’t have it, it may not exist.</p>
            <p>Phone: (310) 260-8744</p>
        </div>
        <div class='boxes box-5'>
            <h4>Pier Bait and Tackle</h4>
            <p>Yes, you can fish at the Pier! And whether you’re a regular or want to try your 
                 hand at this relaxing past-time for the day, the Bait & Tackle shop has your needs covered.</p>
            <p>Phone: (310) 576-2014</p>
        </div>
        <div class='boxes box-6'>
            <h4>Live music & dancing at Rusty's</h4>
            <p>When the sun dips on your day at the beach, stay for some all-American live rock and drink 
                specials at Rusty's.</p>
            <p>Phone: (310) 393-7437</p> 
        </div>
    </div>

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

Modify the button outline while the navigation tabs are active

I have implemented nav-tabs within a bootstrap panel. When the first button is active on the panel header, the border appears thicker on the left side and top. Query: How can I ensure that there is no double thickness in the border for whichever button ...

css

The CDN version of Font Awesome is not displaying the necessary icon

Struggling to incorporate Awesome icons into my Laravel/Vue project, the icon refuses to display correctly no matter what I try. As a last resort, I attempted the most basic approach with Awesome: a straightforward HTML page using a CDN. Here is the code: ...

htmlfont-awesome

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

csstwitter-bootstrap-3

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

My issue is that when I try to resize the columns in tablesorter, they snap back into place. The column width set with resizable_widths does not apply correctly until a column is manually resized. Despite setting the width of all cells to 120px, any cells ...

javascriptjqueryhtmlcsstablesorter

JavaScript text spacing

I'm currently utilizing the JavaScript code snippet below to clear out the existing content within a div element in order to insert new elements. However, I've encountered an issue where once the div is cleared, its CSS styling is lost. I am atte ...

javascriptcss

Tips for styling custom buttons within the active editor popup of tinyMCE using CSS

Looking to enhance my tinyMCE active editor popup with custom CSS. Check out the screenshot provided for reference https://i.sstatic.net/vdVDF.png. Below you can find the code snippet used as a reference: tinymce.activeEditor.windowManager.open({ tit ...

javascriptcsstinymce-4

The dropdown menu is extending beyond its intended position

After solving the issue with my dropdown menu that used to shift all other buttons when hovered over, I stumbled upon a new problem. Now, when the page is scrolled down slightly and a button is hovered over, the dropdown appears in its original position in ...

htmlcss

How to center a position:absolute div inside a position:relative parent div

Regarding: http://jsfiddle.net/WdGdd/3/ I am wondering if it is achievable to center a div with position:absolute within its parent div with position:relative? The goal is to create a button that displays one of two possible values. The width of the butt ...

htmlcsspositioningcss-position

Generate image results based on the values selected in a range slider and submit them

After browsing through various sliders on CodePen, I stumbled upon the Range Slider created by cturney that fits my requirements perfectly. However, I have a few tweaks in mind for this range slider. I would like to add a "Submit" button that displays each ...

javascripthtmljquerycss

Create a submit button using Vue.js for text input

Can anyone help with a beginner question? I have a form that includes a text field. When I type something in and press enter, no result shows up. However, when I type something in and click the button, I get the desired result. Could someone guide me on ...

javascripthtmlformsvue.js

What types of web admin wysiwyg preview functionalities can I find?

One feature of my web admin is a wysiwyg editor that allows users to edit information. There is also a view-only template. Users can preview the information before making any edits. Currently, the view template displays the saved field value as one conti ...

htmlcssasp.net-mvc-3ckeditorwysiwyg

I need help fetching the selected value instead of the option value in PHP

Can anyone offer some assistance with my issue? I have an HTML and PHP function where I am trying to echo a selected value, not the option value. Here is the desired output: "Patrick or any other name when I select and send the button" <?php ...

javascriptphpjqueryhtml

Unusual discovery: Mysterious object manifesting in my HTML on Chrome/Webkit (with visual evidence and interactive demonstration)

I'm at a loss with this peculiar artifact that has appeared in my HTML - take a look at this highly magnified screenshot: Highlighted in red is this bizarrely small line. I've scoured my code but can't seem to pinpoint its origin. I'v ...

htmlcssgoogle-chromewebkit

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...

jquerycssimage-resizingfluid-layoutfluid

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

Non-responsive image in Bootstrap 4

My struggle is with making my website fully responsive. Whenever I use the img tag with a width of 100% on a large screen, the image fits perfectly, but when the window is resized, a horizontal scroll appears, creating white spaces and causing the image ...

csshtmlbootstrap-4

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

javascripthtmlcssvue.jsvuejs2

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait

Should I use Sqlite or Mysql for this project?

I'm in the process of developing an internet-based operating system and I am planning to utilize a database along with persistence.js to store installed apps. Can anyone recommend the optimal database for this purpose? ...

mysqlsqlitehtmlpersistence