Я считаю, что это невозможно с flexbox, так как я не нашел способа сделать это, но, возможно, я что-то упустил.
Один родительский контейнер имеет два дочерних контейнера - один под другим. Ширина второго дочернего элемента (links-container) увеличивается, как только мы загружаем файл HTML со ссылками с длинным текстом. Когда это происходит, ширина первого дочернего элемента (form-wrapper) также увеличивается - так как второй дочерний элемент фактически расширяет весь родительский элемент, и оба его дочерних элемента регулируют свою ширину. Однако мне нужно сохранить ширину первого дочернего элемента (form-wrapper) такой, какой она была раньше.
Я получил эффект, используя display: inline-block для дочернего элемента, ширину которого я хочу сохранить , Но возможно ли это сделать с помощью свойств flexbox?
Вот код. Чтобы увидеть проблему - удалите деталь .form-wrapper {display: inline-block;} из css.
В коде ручки https://codepen.io/bakrall/pen/rNaZKgq У меня тот же код, но уже без display: inline-block; для comaprison. Вы увидите, как увеличивается ширина кнопки загрузки после загрузки файла html со ссылками.
(function(){
function bindUiEvents() {
$('#file-upload').change( function() {
renderLinks(this.files[0]);
});
}
function renderLinks(file) {
const reader = new FileReader(),
$linksContainer = $('.links-container');
reader.onload = function(event) {
const text = event.target.result,
pattern = /(<a.+)(<\/a>)/gm,
links = text.match(pattern);
$linksContainer.empty();
links.forEach(link => {
$linksContainer.append(
`<li class='link-item'>${link}</li>`
)
});
}
reader.readAsText(file);
}
bindUiEvents();
})();
html {
font-size: 16px;
}
body {
display: flex;
justify-content: center;
height: calc(100vh - 5rem);
margin: 5rem 0 0;
background-color: #007da1;
}
h1 {
padding: 0 0.4rem;
}
.form-wrapper {
display: inline-block;
}
.link-harvester-form fieldset {
margin: 0;
border: 0;
padding: 0;
color: #fff;
}
#file-upload {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap;
width: 1px;
}
#file-upload + label {
background-color: #12312b;
border-radius: 4rem;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1rem 2rem;
box-shadow: 0 0 3px #12312b;
box-sizing: border-box;
width: 100%;
text-align: center;
text-transform: uppercase;
}
#file-upload:focus + label,
#file-upload + label:hover {
background-color: #06425b;
}
#file-upload:focus + label {
outline: 1px dotted #000;
}
.links-container {
margin-top: 1.25rem;
list-style: none;
padding: 0 0 0 5px;
font-size: 1.3rem;
}
.links-container a {
color: #12312b;
font-weight: bold;
}
.link-item {
margin: 5px 0;
}
<body>
<div class="link-harvester-wrapper">
<div class="form-wrapper">
<h1>Link Harvester</h1>
<form class="link-harvester-form">
<fieldset>
<input id="file-upload" type="file">
<label for="file-upload">Upload file</label>
</fieldset>
</form>
</div>
<ul class="links-container"></ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="js/linkHarvester.js"></script>
</body>