将最小弹性框高度设置为内容的高度

Question

当我调整窗口大小时，

<input>

元素可能会突出其父级

<div>

。

有什么方法可以保证：

1. .split-content

   最小高度等于内容+边距

2. .split-heading

   与

   .split-content

具有相同的高度

我有以下标记：

.split {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.split-heading {
  border-radius: 8px 0 0 8px;
  min-width: 3em;
}

.split-content {
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0 8px 8px 0;
  padding: 0 2rem;
  background: #ecf0f1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px">
  <div style="display:flex; flex-direction:column; height:100%; width:100%">
    <div style="position:relative; flex:1; width:100%; height:100%;">
      <div style="position:absolute; top:0; right:0; bottom:0; left:0">
        <!-- from here onwards i can change stuff the upper part comes from the framework -->
        <div class="split split-container ">
          <div class="split split-heading bg-primary">
            <h2>
              1
            </h2>
          </div>
          <div class="split split-content">
            <h3>Heading</h3>
            <input type="text" class="form-control" placeholder="..." readonly="TRUE">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

只需使用网格而不是弹性

.split {
  display: grid;
  grid-template-columns: 3em 1fr;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.split-heading {
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-content {
display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0 8px 8px 0;
  padding: 0 2rem;
  background: #ecf0f1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px">
  <div style="display:flex; flex-direction:column; height:100%; width:100%">
    <div style="position:relative; flex:1; width:100%; height:100%;">
      <div style="position:absolute; top:0; right:0; bottom:0; left:0">
        <!-- from here onwards i can change stuff the upper part comes from the framework -->
        <div class="split split-container ">
          <div class="split split-heading bg-primary">
            <h2>
              1
            </h2>
          </div>
          <div class="split split-content">
            <h3>Heading</h3>
            <input type="text" class="form-control" placeholder="..." readonly="TRUE">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>