Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1312

Flexbox child item width doesn't fit the content width

$
0
0

I have an issue with the Flexbox child item. It doesn't fit with the content width. The code is below.

enter image description here

.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 take the full space, but I don't want that. I want <div class="d-flex align-items-center"></div> will take the content width not the full width of the box.


Viewing all articles
Browse latest Browse all 1312

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>