I have an issue with the Flexbox child item. It doesn't fit with the content width. The code is below.
.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.