JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="input-group">
  <input type="text">
  <button class="btn">확인</button>
</div>

<div class="input-group">
  <input type="text">
  <button class="btn">확인</button>
  <button class="btn">취소</button>
</div>

<p>input 영역을 제외한 영역이 유동적인 경우 <br>
input 영역은 나머지 영역을 풀로 채운다.</p>
<!-- <p>
  https://stackoverflow.com/questions/39884226/why-does-an-element-with-flex-1-width-0-still-have-width
</p> -->

SCSS

body {
  margin: 30px;
}
.input-group {
  display: flex;
  margin: 20px 0;
  input {
    display: flex;
    flex: 1;
    width: 0;
    & + .btn {
      margin-left: 5px;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    padding: 0 10px;
  }
}

p {
  margin-top: 10px;
  font-size: 12px;
  word-wrap: break-word;
}