0

In this example, I want the label and input each to take up 50% of the parent div container. This should be able to achieve via either width or flex property. However, when I was doing the experiment to switch from "width" to "flex: 0 0 50%" the size of the parent container expands. Right now the sidebar size grows bigger than before. It got me wondering what leads to this size expansion even though the result still meets my need(label and input field each occupies 50% of the width of its container). Please take a look at the following CSS snippet:

.form__label {
  flex: 0 0 50%;
  font-size: 1.5rem;
  font-weight: 600;
}
.form__input {
  width: 50%;
  /*   flex: 0 0 50%;
  min-width: 0; */
  padding: 0.3rem 1.1rem;
  font-family: inherit;
  font-size: 1.4rem;
  border: none;
  border-radius: 3px;
  background-color: var(--color-light--3);
  transition: all 0.2s;
}
Merna Mustafa
  • 1,235
  • 2
  • 10
  • 22
John Huang
  • 308
  • 1
  • 3
  • 11
  • 1
    It's definitely related to the flex-basis: 50rem you have set on the .sidebar container (you never set a specific width). It's a little hard to workout where the width is changing with all of the nested flex and grid - but this might help explain the flex behaviour in general: https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width – daggett Feb 01 '22 at 12:21
  • Indeed, I've never specifically specified the width anywhere in the CSS. The flex-direction for .sidebar is column so the flex-basis corresponds to its height rather than width. Should I "always" specify the "width" in the outermost container just in case something weird like this happens again? – John Huang Feb 01 '22 at 16:00
  • 1
    Yeah I'm especially for sidepanels I've found that having specific widths helps with lots of overflow/sizing issues! Also think that flax basis on .sidebar is effecting the width - try changing it to 100rem – daggett Feb 01 '22 at 19:43
  • @daggett Gottcha thanks for your advice. – John Huang Feb 03 '22 at 03:54

0 Answers0