The width of the flexbox child item is too narrow for the content it contains

I am facing an issue with the Flexbox child element not aligning correctly with the content width. Here is the code snippet:

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

.pw-event-options {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 280px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 280px;
  flex: 0 0 280px;
  max-width: 280px;
}

.pw-list-item-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
}

.align-items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
  -moz-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.pw-list-item-item.pw-event-options a {
  border: 6px solid rgba(0, 0, 0, 0);
  display: inline-block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
  margin-right: 50px;
  max-width: 80px;
  outline: none;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out 0s;
  -o-transition: all .3s ease-in-out 0s;
  -moz-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
}

.pw-list-item-item.pw-event-options .pw-moderation-type {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ececec;
  -webkit-border-radius: 20.5px;
  border-radius: 20.5px;
  color: #222;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 130px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 130px;
  flex: 0 0 130px;
  font-size: 26px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  height: 41px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1.2307692308;
  max-width: 130px;
}
<div class="pw-list-item-item pw-event-options">
  <div class="d-flex align-items-center">
    <a href="javascript:void(0);">
      <svg width="512" height="512" viewBox="0 0 512 512"></svg>
    </a>
    <div class="pw-moderation-type">OFF</div>
  </div>
</div>

flex-grow: 1; will occupy the full space, but I specifically want 

<div class="d-flex align-items-center"></div>
to adjust its width according to the content and not take up the complete width of the container.

htmlcssflexbox

Answer №1

Your code might be experiencing an issue due to the default align-items: center property set on the .pw-list-item-item container. This causes child elements to stretch and fill the available space within the container, regardless of their content size. To resolve this, you can make the following adjustment:

.pw-list-item-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 10px;
  padding-right: 10px;  
  align-items: flex-start;  /* Update this line */
}

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

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

Ways to create a fixed button positioned statically at the bottom of a page

Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked be ...

javascripthtmlcsstypescripttailwind-css

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

javascriptjqueryhtmlstring

The HTML page is not responsive to the screen size of the mobile device

Check out my HTML code: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style type= ...

htmlcssmobile

How to customize the radio button style in Angular 11 by changing the text color

Hey guys, I'm working with these radio buttons and have a few questions: <form [formGroup]="myForm" class="location_filter"> <label style="font-weight: 500; color: #C0C0C0">Select a button: </label& ...

javascripthtmlangulartypescriptforms

HTML Remover resulting in a malfunction

Currently in the process of removing HTML tags from text using the following method: <p><b>Masala</b> films of <a href="/wiki/Cinema_of_India" title="Cinema of India">Indian cinema</a> are those that combine different genres ...

pythonhtmlstripping

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

javascriptandroidhtmlvideoyoutube

What is the method for increasing the left margin of the back button on the default header in React Native?

My attempt to increase the space on the back button from the left side of the header in my React Native code has been unsuccessful. headerStyle: { paddingLeft: 60 } https://i.stack.imgur.com/0RFb0.png I also experimented with adding margin ...

htmlcssreact-nativeflexboxjsx

javascript doesn't execute the php script

Hello everyone, I've been working on a project for quite some time and I’ve encountered an issue that I can't seem to solve. Hopefully, you can help me out with this. I have a digital LED strip controlled by an Arduino, which in turn is control ...

javascriptphphtml

Let's talk about the CSS properties for centering content and automatically

I've been struggling with getting my navbar to center and adjust its width based on the content inside. Can anyone help me with this? <nav> <ul id="menu" class="black"> <li><a href="index.html">Home</a></l ...

htmlcsscenternavnavbar

What is the best way to create a JQuery function that fills a div based on the selected option from an HTML select

Check out this simple JavaScript function below. <html> <head> <script> $(document).ready(function() { $.get('getImage.php', function(data) { $('#imageSelector').html("<select>" + d ...

phpjqueryhtml

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

javascriptcssdompseudo-element

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

Storing data from one file into a different directory in PHP

As a php beginner, I have discovered that the most effective tool for working with MySQL databases and files is php. Currently, I am trying to retrieve a file with the name 'file_name'. <input type=file name="file_name"> and then save th ...

phphtmlfile-upload

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

Transforming table headers in Rmarkdown ioslides

I am experimenting with creating a custom table format for tables generated using the ioslides_presentation output type in Rmarkdown with Rstudio Version 0.98.1028. However, I'm facing difficulty in modifying the styling of the table headers. Below i ...

cssformattingmarkdownrstudio

Inject Dynamic HTML Content onto the Page or in a Pop-up Box

I am currently working on a C# asp.net Web Forms project that involves a credit card payment system. The system returns HTML code for a 3D payment page, but it does not auto-redirect. Here is a snippet of my request: thirdBasketItem.Price = "0.2"; basketI ...

javascriptc#jqueryhtmlasp.net

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

htmlcss

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...

javascriptjqueryangularjshtmlionic-framework