0

As the title states, I want to create a border, which is only as wide as the content it surrounds.

My current attempt looks like this:

There are two children in the parent div, which has a class of .cv-generator assigned. These two children, which are divs, have flex-grow: 1, flex-shrink: 1, flex-basis: auto assigned. I did this, so that both divs get 50% of the parent div, if possible.

The div, which should get a border as wide as it contents, is reached by the following structure: <div class="cv-generator"> → <div class="general"> → <div class="general-input"> → <div class="address">.

The <div class="address"> got a solid border of 5px and a width set to min-content. This keeps the border as wide as the divs content, however the div does not expand, when there is available space.

image that shows that div is not expanding, same as snippet below

Code: 

html {
  border: 5px solid black;
}

html, body {
  height: 100%;
}

.cv-generator {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.cv-generator>div {
  height: 100%;
  flex: 1 1 auto;
}

.cv-generator-input {
  margin-left: 2vw;
}

.general-input>.address {
  border: 5px solid black;
  width: min-content;
}
<div class="cv-generator">

  <div class="cv-generator-input">
    <h2>General Info</h2>
    <div class="general">
      <div class="general-input">
        <!--just a bunch of inputs-->
        
        <input type="text" name="firstName" placeholder="First Name" value=""><input type="text" name="lastName" placeholder="Last Name" value=""><input type="text" name="email" placeholder="Email" value=""><input type="text" name="phone" placeholder="Phone"
          value="">
          
        <!--end of inputs-->
        <div class="address">
          <!--more inputs-->
          
          <input type="text" name="street" placeholder="Street" value=""><input type="text" name="number" placeholder="Number" value=""><input type="text" name="city" placeholder="City" value=""><input type="text" name="state" placeholder="State" value="">
          <input
            type="text" name="zip" placeholder="Zip" value=""><input type="text" name="country" placeholder="Country" value="">
            <!-- end of more inputs-->
            
        </div>
      </div>
    </div>
    <h2>Education</h2>
    <button>Add</button>
    <h2>Experience</h2>
    <button>Add</button>
  </div>
  
<div class="cv-generator-output">
</div>

</div>

Because of that problem, I tried a different approach; I changed the CSS of <div class="address"> to the following:

border: 5px solid black;
display: flex;
flex-wrap: wrap;

and also the flex-property of .cv-generator>div to:

flex: 1 1 0;

However, this attempt shows an unsatisfying result; the border is wider than its content.

image that shows that the border is wider than its content, same as snippet below

Code with new attempt:

html {
  border: 5px solid black;
}

html, body {
  height: 100%;
}

.cv-generator {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.cv-generator>div {
  height: 100%;
  flex: 1 1 0;
}

.cv-generator-input {
  margin-left: 2vw;
}

.general-input>.address {
  border: 5px solid black;
  display: flex;
  flex-wrap: wrap;
}
<div class="cv-generator">

  <div class="cv-generator-input">
    <h2>General Info</h2>
    <div class="general">
      <div class="general-input">
        <!--just a bunch of inputs-->
        
        <input type="text" name="firstName" placeholder="First Name" value=""><input type="text" name="lastName" placeholder="Last Name" value=""><input type="text" name="email" placeholder="Email" value=""><input type="text" name="phone" placeholder="Phone"
          value="">
          
        <!--end of inputs-->
        <div class="address">
          <!--more inputs-->
          
          <input type="text" name="street" placeholder="Street" value=""><input type="text" name="number" placeholder="Number" value=""><input type="text" name="city" placeholder="City" value=""><input type="text" name="state" placeholder="State" value="">
          <input
            type="text" name="zip" placeholder="Zip" value=""><input type="text" name="country" placeholder="Country" value="">
            <!-- end of more inputs-->
            
        </div>
      </div>
    </div>
    <h2>Education</h2>
    <button>Add</button>
    <h2>Experience</h2>
    <button>Add</button>
  </div>
  
<div class="cv-generator-output">
</div>

</div>

How can I achieve that the border is only as wide as the contents div and that the div tries filling up the available space?

Marten
  • 645
  • 7
  • 21
  • I add this as a comment as I have no time to debug your code but, with your example, you are using flex, inside flex, inside flex... You use a flex container when you need the children to behave as, well..., flex... you don't need all containers to have the propertie. – Alvaro Menéndez Nov 18 '21 at 20:27
  • @AlvaroMenéndez Maybe I misunderstood you, but my flex inside flex solution was just an attempt to achieve the desired result because my other attempt was not working. Somebody closed the question, directing me to a question, where it is stated that my desired result is only achievable with JS, so I guess I went in the wrong direction. :) – Marten Nov 18 '21 at 21:27

0 Answers0