flexbox column stretch to fit content [duplicate]

问题

Goodday fellow developers,

I would like to create a container that allows content to go from top to bottom and left to right. The parent container needs to stretch to fit but within maximum defined values.

I have used flexbox for this purpose, however I do not get the parent container to stretch to fit. Does anyone have any suggestions, without having to hack my way with javascript to calculate the width?

.flex-container {
  display: inline-flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 300px;
  max-width: 1000px;
  background-color: #333;
}


.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
</div>

回答1:

Did you really need the outer inline container? I would suggest this approach:

.flex-container {
  display: flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;    
  flex-flow: column wrap;
 
  max-height: 300px;
  max-width: 1000px;      
  background-color: #333;
}

.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<!-- <div class="flex-container"> -->
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
<!-- </div> -->

来源：https://stackoverflow.com/questions/47452689/flexbox-column-stretch-to-fit-content

标签

html

css

flexbox