将li布局显示为flex

Question

Could anyone help to see why below code is not work as expected:

I want the 2nd option content("Log when error occurs and limit ...") wrapped in the yellow background

 .flex{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -ms-flex; position: relative; min-height: 0; min-width: 0; } .flex--1{ flex: 1 1 auto; } .flex--0{ webkit-flex-grow: 0; -webkit-flex-shrink: 0; -moz-flex: 0; flex: 0 0 auto; } input[type=radio].radio-button + label.radio-label { padding-left: 20px; height: 16px; display: inline-block; line-height: 16px; background-repeat: no-repeat; background-position: 0 0; font-size: 14px; vertical-align: middle; cursor: pointer; color: #666666; } li { list-style-type: none; display: list-item; } 

 <ul class="form__group"> <li>Send messages</li> <li> <input type="radio" name="log-options" class="radio-button" id="log-options-always" value="0"> <label for="log-options-always" class="radio-label ng-binding">always</label> </li> <li class="flex" style="background-color: yellow;"> <div class="flex--1"> <input type="radio" name="log-options" id="log-options-when-error" class="radio-button" value="1"> <label for="log-options-when-error" class="radio-label">Log when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache toLog when error occurs and limit log cache to</label> </div> <div class="flex--0 width--lg disabled" ng-class="{disabled: data.Log.AutoLog !== '1'}"> <input type="text"> <span>KB</span> </div> </li> </ul> 

Also see the fiddle .

Answer 1

It needs a min-height on the element to grow with its content so you change this

input[type=radio].radio-button + label.radio-label {
    padding-left: 20px;
    height: 16px;

to this

input[type=radio].radio-button + label.radio-label {
    padding-left: 20px;
    min-height: 16px;

Side note:

Try use either CSS file (recommended) or inline style, as it is not recommended to have both.

So for example instead of this

<li class="flex" style="background-color: yellow;">

you do this

HTML

<li class="flex yellowBg">

CSS

.yellowBg {
    background-color: yellow;
}