Tips for stopping an image from stretching the cell in flexbox using CSS

When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed its max-width limit. If an image is placed inside the parent div, there may be issues with the parent enlarging.

#parent {
  display: flex;
  flex-direction: column;
  min-width: 10px;
  max-width: 240px;
}
<div id="parent">
  <div id="child1">text here should decide parent width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

htmlcssflexboxgrid

Answer №1

In response to the query How can we prevent an image from enlarging its container in CSS Flexbox, I would like to provide a demonstration, although there may be similar solutions available.

.container,
#container {
  display: flex;
  flex-direction: column;
  min-width: 10px;
  width:max-content;
  max-width: 240px;
  border: solid;
}

.container img,
#container img {
  width: 0;
  min-width: 100%;
}
<div id="container">
  <div id="child1">text content here will determine the container's width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

<div class="container">
  <div>s</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

<div class="container">
  <div>text data</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

<div class="container">
  <div>text information here</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>
<div class="container">
  <div>text details that should decide the parent width . Is it clear now?</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></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

Unable to match the height of the inner card image in bootstrap with the height of the outer card image

I'm facing an issue with two bootstrap cards, one nested inside the other, both containing images. Check out the StackBlitz here The inner image doesn't flex to the same height as the outer one, resulting in a small space between the two cards ...

htmlcsstwitter-bootstrap

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

Input fields are not being displayed in the Django form

I've been struggling with resolving this issue using chat GPT for quite some time now. It keeps indicating that everything is fine, but it's clearly not working as expected. At the moment, I am focusing on fixing the email field first before proc ...

pythonhtmldjango

Can you explain the significance of the symbol "<<<HTML"?

During my code reading, I came across the symbol <<<H.TML. My colleagues mentioned that it is often used to embed HTML within a PHP file. I attempted to gather more information on its usage but could not find much. Could someone please explain ho ...

phphtml

Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as t ...

cssreactjsfrontendmaterial-uistyled-components

Styling and scripting with CSS and jQuery in an external JavaScript file

Is it possible to add the jquery library from "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" into an external .js file? And how can a .css file be included in a .js file? ...

javascriptjquerycss

The Send.php script is missing the input fields for Name and Email

Running my own website at CrystalVision.com, I have some challenges with my PHP skills. The issue lies within my send.php file. Although the email functionality works fine and I receive messages, the Name and Email fields filled in by users are not display ...

phphtmlemailhtml-emailcontacts

Kendo checkbox toggle issue with switching between true and false states is not functioning correctly

How can I make a button appear when one or more checkboxes are clicked? Currently, the toggle function only activates when I select one checkbox, and then deactivates upon selecting another. Any guidance on improving this functionality would be greatly app ...

htmlangulartypescriptcheckboxkendo-ui

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

javascripthtmlangularjs

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

Having trouble importing JS into HTML file with NodeJS

I have created a web server using NodeJS that serves the file index.html. However, when I attempt to add a JavaScript file to my HTML document, the browser displays an error message stating The resource "http://localhost:3000/includes/main.js" was blocked ...

javascripthtmlnode.jsexpress

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

"Managing output buffers, styling with CSS, and sending emails with PHP

I am currently using a script to send emails that result in a couple of HTML tables: $from = "example.com <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82efebe7ef83898ce0ede1e9e3e6d2edeee8">[email protected]</a ...

phpcssemailob-get-contents

Position the Bootstrap 5 navbar at the top of the page and set it

Is there a way to use the fixed-top class on a navbar without making it full width and overlapping the container? This is the code: <div class="container" style="border: 1px solid;"> <nav class="navbar fixed-top n ...

cssbootstrap-5

Implementing a Javascript solution to eliminate the # from a URL for seamless operation without #

I am currently using the pagepiling jQuery plugin for sliding pages with anchors and it is functioning perfectly. However, I would like to have it run without displaying the '#' in the URL when clicking on a link like this: www.mysite.com/#aboutm ...

javascripthtmljquerypagepiling.js

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

javascripthtmlform-data

transferring background-image in html between elements

Imagine having a three-level hierarchy HTML code structured like this: <section> <div id="outer"> <div id="inner"> </div> </div> </section> If we set background-image:someImage.jpg to the section, and backg ...

javascriptjqueryhtmlcss

Transfer the document into JavaScript by copying and pasting

I am in need of some assistance with a basic form that includes an input field. While the form is functional, I would like to provide users with the option to upload a file by simply pasting it into the browser using CTRL+V. Is there a way to achieve this ...

javascripthtml

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

htmlrotationcss

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

javascriptjqueryhtmltext