Tips for adjusting the size of a container to fit its child element in a flexbox layout, where the flex-direction is set to column

Below is the functional code:

.container{
  display: flex;
  background-color: lightgreen;
  justify-content: center;
  alighn-item: center;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}
<div class='container'>
  <div>Test</div>
  <div class='child'>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
  </div>
</div>

Current output

https://i.sstatic.net/7H8cQ.png

Expected output

https://i.sstatic.net/fzR3g.png

The child container (yellow) width should match the child item (red) elements

htmlcssflexbox

Answer №1

.test-container{
  background-color: lightgreen;
  padding: 20px 0px;
}
.container{
  background-color: lightgreen;
  width:300px;
  margin:auto;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}
<div class="test-container">
  <div class='container'>
    <div>Test</div>
    <div class='child'>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
    </div>
  </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

Can PhoneGap/Cordova's Media class bypass the restrictions of audio in HTML5 on iOS and Android devices?

After researching the limitations of html5 on iOS, I discovered that only one audio file can be played at a time and audio can only be triggered by user interaction. This is discouraging as I am working on creating a high-quality html5 game that requires b ...

androidioshtmlaudiocordova

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer

Incorporating a vertical slider alongside a fullPage.js section for a dynamic user experience

Is there a way to achieve a transition effect similar to this example for fullPage.js section-elements? <div id="fullpage"> <div class="section"></div> <div class="section"></div> </div> I have experimented with var ...

jqueryhtmlcssfullpage.js

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?

My div is set to have a margin:auto, but the h1 inside is not centered as expected. I've tried various solutions, but none seem to work. Can someone please help me get it centered properly? body { background: #5D6D7E; color: wh ...

htmlcsswebmargin

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

javascriptphphtmlweb

Tips for encoding a base64 string into formats such as PDF, doc, xls, and png using jQuery, JavaScript, and HTML5

Need help handling base64 strings received from the server to save files in multiple browsers (IE, FF, Chrome). If receiving a PDF base64 string, how can it be saved in the browser? Also, if receiving an Image or Doc base64 string, what is the process fo ...

javascriptjqueryajaxhtml

Looking to incorporate Bootstrap Icons within Semantic UI?

I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of reada ...

cssbootstrap-4iconssemantic-ui-css

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

javascriptjqueryhtmlcssajax

Tips for implementing styling in a material table within a reactjs application

Is there a different way to set the display property to inline-block since cellStyle doesn't seem to recognize it? How can I adjust the width of a specific column, let's say with the name title, without affecting the width of all other co ...

cssreactjsmaterial-uimaterial-table

Customizing Bootstrap Navbar: Ensuring the External Search Bar is displayed correctly within the expanded navbar

In my Bootstrap 5 navbar, I have a search bar, notifications dropdown, and collapsible buttons. How can I ensure that the search bar is visible in the expanded version of the navbar and hidden when the navbar is collapsed, while keeping the notifications d ...

htmlcssbootstrap-5

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

Tips for keeping a label above an input field

Is it possible to add a styled label on top of an input element? I have seen images placed inside input elements for indicating the type of input accepted. For example, in a login form, a user icon represents the username field and a key icon represents th ...

htmlcss

What is the best method to modify and access imported .css files within the WordPress style.css file?

I could use some assistance with a project involving minor edits to a WordPress website. I've hit a roadblock and need some help. The style.css file in WordPress doesn't have much CSS code, but instead imports files like this: /*Animate*/ @impo ...

csswordpresstwitter-bootstrap

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

Tips for effectively applying an image as a border

Just starting out with HTML and CSS here, and I'm trying to figure out how to use an image as a border for a div element. Can someone help point out my mistake? div { width: 240px; height: 510px; background-color: lightblue; border-image ...

htmlcssborder-image

Ensuring that a canvas remains centered and completely visible within its parent element while zooming in React

Currently, I am developing a straightforward PowerPoint creator using React. In this project, I have integrated a zoom feature for a canvas element. The principle is that the canvas should resize based on a scale factor. However, there seems to be an issue ...

javascripthtmlcssreactjscanvas

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

htmlcss

Having trouble customizing the appearance of wtform attributes

Hello Everyone, Here is the content of the .py file: from flask import Flask, render_template, flash, session, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import Da ...

htmlcssflaskjinja2flask-wtforms

Picking a live Selected choice within an HTML form

I currently have a dropdown menu that displays a list of employee names: <select class="form-control" id="assignee" name="assignee" style="max-width: 300px;"> <option value="Employee 1">Employee 1</option> <option value="Em ...

phphtmlsql