Question

我在获取文本区域以填充父div时遇到问题。我找到了将盒子大小设置为边框的解决方案，但这对我不起作用。任何帮助将不胜感激！

             <div class="flx-modal">
                <div class="flx-label">
                    <label for="CorrectiveActionSteps">Time Line:</label>
                </div>
                <div class="flx-txtarea">
                    @Html.TextAreaFor(a => a.TimeLine, new { @class = "form-control textarea" })
                </div>
            </div>

的CSS：

.flx-modal{
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

div.flx-txtarea {
    background-color: red;
    flex: 1;
    margin-left: 15px;
    padding: 0;
}

.flx-txtarea > textarea {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
    -moz-box-sizing: border-box !important; /* FF1+ */
}

Answer 1

如果您添加flex-direction: column，请将flex: 1更改为width: 100%并删除margin-left: 15px，即可获得

.flx-modal{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}
div.flx-txtarea {
    background-color: red;
    width: 100%;
    padding: 0;
}
.flx-txtarea > textarea {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: border-box !important; /* FF1+ */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

<div class="flx-modal">
  <div class="flx-label">
    <label for="CorrectiveActionSteps">Time Line:</label>
  </div>
  <div class="flx-txtarea">
    <textarea class="form-control textarea"></textarea>
  </div>
</div>

您还可以添加flex-wrap: wrap;，删除margin-left: 15px并添加此规则

div.flx-label {
    width: 100%;
}

.flx-modal{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 15px;
}
div.flx-label {
    width: 100%;
}
div.flx-txtarea {
    background-color: red;
    flex: 1;
    padding: 0;
}
.flx-txtarea > textarea {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: border-box !important; /* FF1+ */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

<div class="flx-modal">
  <div class="flx-label">
    <label for="CorrectiveActionSteps">Time Line:</label>
  </div>
  <div class="flx-txtarea">
    <textarea class="form-control textarea"></textarea>
  </div>
</div>

CSS Textarea不填充父级

1 个答案: